Why this script is not validating the form

Posted by danishjan on Stack Overflow See other posts from Stack Overflow or by danishjan
Published on 2014-08-21T04:17:41Z Indexed on 2014/08/21 4:19 UTC
Read the original article Hit count: 68

Filed under:

This is registration form code. i wrote script in one i have accessed every element by Id and in One by name but both donot validation it.

    <div id="form">
    <form action="" method="get" id="formdata" >
        <p>
            <label for="firstName" class="labels">&nbsp; &nbsp;First Name </label>
            <input type="text" name="firstName" id="firstName" placeholder="First Name" 
 />
            <label for="firstName" id="errorfirstName" style="color:red; font-
 size:14px; visibility:hidden;"> Please Enter First Name </label>
        </p>

        <p>
            <label for="lastName" class="labels">&nbsp; &nbsp;Last Name </label>
            <input type="text" name="lastName" id="lastName" placeholder="Last Name" />
            <label for="lastName" id="errorlastName" style="color:red; font-size:14px; 
 visibility:hidden;"> Please Enter Last Name</label>

        </p>

        <p>
            <label for="fatherName" class="labels">Father Name</label>
            <input type="text" name="fatherName" id="fatherName" placeholder="Father 
 Name" />
            <label for="fatherName" id="errorfatherName" style="color:red; font-
 size:14px; visibility:hidden;"> Please Enter Father Name </label>
        </p>

        <p>
            <label for="classNo" class="labels">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  
 &nbsp;Class </label>
            <input type="text" name="classNo" id="classNo" placeholder="Class" />
            <label for="classNo" id="errorclassNo" style="color:red; font-size:14px; 
            visibility:hidden;"> Please Enter Class </label>
        </p>

        <p>
            <label for="address" class="labels">&nbsp; &nbsp; &nbsp; &nbsp;Address  
            </label>
            <input type="text" name="address" id="address" placeholder="Address" />
            <label for="address" id="erroraddress" style="color:red; font-size:14px; 
            visibility:hidden;"> Please Enter Address </label>
        </p>


        <p>
            <input type="submit" value="Submit" onSubmit="return validate()" />
        </p>

    </form>

And the JavaScript Code is here. What is wrong with this code. This code is through accessing by Element Id.

   <script type="text\javascript">

    function validate(){

    var valid=true;

    var fname=document.getElementById("firstName");
    var lname=document.getElementById("lastName");
    var fathname=document.getElementById("fatherName");
    var classno=document.getElementById("classNo");
    var address=document.getElementById("address");

    var errfname=document.getElementById("errorfirstName");
    var errlname=document.getElementById("errorlastName");
    var errfathname=document.getElementById("errorfatherName");
    var errclass=document.getElementById("errorclass");
    var erraddress=document.getElementById("erroraddress");

    if(fname.value == ""){
        errfname.style.visibility="visible";
        valid=false;
    }

    if(lname.value == ""){
        errlname.style.visibility="visible";
        valid=false;
    }

    if(fathname.value == ""){
        errfathname.style.visibility="visible";
        valid=false;
    }

    if(classno.value == ""){
        errclass.style.visibility="visible";
        valid=false;
    }

    if(address.value == ""){
        erraddress.style.visibility="visible";
        valid=false;
    }

    return valid;
}
 </script>

© Stack Overflow or respective owner

Related posts about JavaScript