Saturday, 22 August 2015

Form Validation using Java Script

HTML File
  
   
  <html>
    <head>
        <title>validation</title>
        <script src="validation.js" type="text/javascript"></script>
    </head>
    <body>
    <center><h2>Validation Form</h2></center>
    <form name="registration" action="#" method="GET" onSubmit="return chk_valid();">
        <div id="form1">
            <div class="lbl">First Name:</div>
            <div class="ctrl" style="float: left;">
                <input type="text" name="fname">
                <span id ="err_fname"></span>
            </div>
            </br></br>
            <div class="lbl">Last Name : </div>
            <div class="ctrl" style="float: left;">
                <input type="text" name="lname">
                <span id ="err_lname"></span>
            </div>
            </br></br>

            <div class="lbl">Password : </div>
            <div class="ctrl" style="float: left;">
                <input type="password" name="pwd">
                <span id ="err_pword"></span>
            </div>
            </br></br>
            <div class="lbl">Retype Password : </div>
            <div class="ctrl" style="float: left;">
                <input type="password" name="rpwd">
                <span id ="err_rpword"></span>
            </div>
            </br></br>
            <div class="lbl">Address : </div>
            <div class="ctrl">
                <textarea rows="4" cols="30" name="addr"></textarea>
                <span id ="err_addr"></span>
            </div>
            </br>
            <div class="lbl">Pincode : </div>
            <div class="ctrl">
                <input type="number" name="pin">
                <span id ="err_pin"></span>
            </div>
            </br>
            <div class="lbl">Contact No : </div>
            <div class="ctrl">
                <input type="text" name="con" id="cn">
                <span id ="err_cn"></span>
            </div>
            </br>
            <div class="lbl">Email : </div>
            <div class="ctrl">
                <input type="text" name="mail" id="mail">
                <span id ="err_mail"></span>
            </div>
            </br>
            <div class="lbl">Gender : </div>
            <div class="ctrl">
                <input type="radio" name="msex" value="Male" /><span>Male</span>
                <input type="radio" name="fsex" value="Female" /><span>Female</span>
                <span id ="err_gender"></span>
            </div>
            </br></br>
            <div class="ctrl" style="text-align: center">
                <input type="submit" name="submit" id="submit" value="Submit">
                <input type="reset" name="reset" id="reset" value="Cancel">
            </div>
        </div>
    </form>
</body>
</html>

  
Java Script File
  
   
function chk_valid()
{
    var fid = document.registration.fname;
    var lid = document.registration.lname;
    var pwd = document.registration.pwd;
    var rpwd = document.registration.rpwd;
    var addr = document.registration.addr;
    var pin = document.registration.pin;
    var con = document.registration.con;
    var mail = document.registration.mail;
    var msex = document.registration.msex;
    var fsex = document.registration.fsex;
    
    if(fname_validation(fid))
    {
        if(lname_validation(lid))
        {
            if(pwd_validation(pwd))
            {
                if(rpwd_validation(rpwd))
                {
                    if(addr_validation(addr))
                    {
                        if(pin_validation(pin))
                        {
                            if(con_validation(con))
                            {
                                if(mail_validation(mail))
                                {
                                    if(sex_validation(msex, fsex))
                                    {
                                        
                                    }
                                }
                            }
                            
                        }
                    }
                }
            }
        }
    }
    return false;
}

function fname_validation(fid)
{
    var letters = /^[A-Za-z]+$/;
    if (fid.value.match(letters))
    {
        document.getElementById("err_fname").innerHTML = "";
        return true;
    }   
    else
    {
        document.getElementById("err_fname").innerHTML = "Enter char only";
        fid.focus();
        return false;
    }
    
}
function lname_validation(lid)
{
    var letters = /^[A-Za-z]+$/;
    if (lid.value.match(letters))
    {
        document.getElementById("err_lname").innerHTML = "";
        return true;
    }   
    else
    {
        document.getElementById("err_lname").innerHTML = "Enter char only";
        lid.focus();
        return false;
    }  
}
function pwd_validation(pwd)
{
        var reg = /^([A-z0-9!@#$%^&**-+/]{8,20})$/;
        if (pwd.value.match(reg))
        {
            document.getElementById("err_pword").innerHTML = "";
            return true;
        }
        else
        {
            document.getElementById("err_pword").innerHTML = "please enter valid Password...";  
            pwd.focus();
            return false;
        }
}
function rpwd_validation(rpwd)
{
    var pwd = document.registration.pwd;
    if (pwd.value == rpwd.value)
        {
            document.getElementById("err_rpword").innerHTML = "";
            return true;
        }
        else
        {
            document.getElementById("err_rpword").innerHTML = "Password does not match...";
            rpwd.focus();
            return false;
        }
}
function addr_validation(addr)
{                                                          
    if (addr.value == "")
        {
            document.getElementById("err_addr").innerHTML = "plz enter address";
            addr.focus();
            return false;
        }
        else
        {
            document.getElementById("err_addr").innerHTML = "";
            return true;
        }
}
function pin_validation(pin)
{                                                          
    var reg = /^([0-9]{6})$/;
        if (pin.value.match(reg))
        {
            document.getElementById("err_pin").innerHTML = "";
            return true;
        }
        else
        {
            var msg = "please enter valid Pincode...";
            document.getElementById("err_pin").innerHTML = msg;
            pin.focus();
            return false;
        }
}
function con_validation(con)
{
 var numbers = /^([0-9]{10})$/;
    if (con.value.match(numbers))
    {
        document.getElementById("err_cn").innerHTML = "";
        return true;
    }
    else
    {
        var msg = "please enter valid Contact No. ...";
        document.getElementById("err_cn").innerHTML = msg;
        con.focus();
        return false;
    }   
}
function mail_validation(mail)
{
  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    if (mail.value.match(mailformat))
    {
        document.getElementById("err_mail").innerHTML = "";
        return true;
    }
    else
    {
        var msg = "please enter valid mail addr. ...";
        document.getElementById("err_mail").innerHTML = msg;
        mail.focus();
        return false;
    }  
}
function sex_validation(msex, fsex)
{
    count = 0;

    if (msex.checked)
    {
        count++;
    }
    if (fsex.checked)
    {
        count++;
    }
    if (count == 0)
    {
        var msg = "please Select Male/Female";
        document.getElementById("err_gender").innerHTML = msg;
        msex.focus();
        return false;
    }
    else
    {
        alert('Form Succesfully Submitted');
        window.location.reload()
        return true;
    }
} 
  

No comments:

Post a Comment