Why this script is not validating the form
- by danishjan
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"> 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"> 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">
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"> 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>
