Objective and outcomes

In this tutorial we are going to learn about form validation on basic form elements using javascript. Form validation is needed to identify the correctness of data before sending it to the server. Basic form elements on which validation is implemented are text input, select-option, checkboxes and radio button. The type of validation we are going to learn in this tutorial is also known as basic validation and there is one another type of validation known as data-format validation which use to validate email and password data.



HTML code:

<html>
<body>
<form name="form1" onSubmit="return(form_valid());" method="post">
Name:&nbsp;<input type="text" name="fname"><br/>
<br/>
Pincode:&nbsp;<input type="text" name="code"><br/>
<br/>
Country:&nbsp;
<select name="country">
<option value="-1" selected>Choose country</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="France">France</option>
</select>
<br/>
<br/>
<input type="checkbox" name="chk" value="1">&nbsp;1<br/>
<input type="checkbox" name="chk" value="2">&nbsp;2<br/>
<input type="checkbox" name="chk" value="3">&nbsp;3<br/>
<input type="checkbox" name="chk" value="4">&nbsp;4<br/>
<br/>
<input type="radio" name="gender" value="male">&nbsp;Male<br/>
<input type="radio" name="gender" value="female">&nbsp;Female<br/>
<br/>
<input type="submit" value="submit">
<br/>
</form>
</body>
</html>





Javascript:

<script type="text/javascript">

function form_valid()
{


// Basic validation
if(document.forms["form1"]["fname"].value == "")
{
alert("please provide your name!!");
document.forms["form1"]["fname"].focus();
return false;
}

if(document.forms["form1"]["code"].value == "" || isNaN(document.forms["form1"]["code"].value) || (document.forms["form1"]["code"].value.length != 6))
{
alert("please provide the pincode in the format ######   !!");
document.forms["form1"]["code"].focus();
return false;
}

if(document.forms["form1"]["country"].value == "-1")
{
alert("please provide your country !!");
document.forms["form1"]["country"].focus();
return false;
}

if(document.form1.chk[0].checked == false && document.form1.chk[1].checked == false && document.form1.chk[2].checked == false && document.form1.chk[3].checked == false )
{
alert("please choose atleast one options from the list");
return false;
}


if(document.form1.gender[0].checked == false  && document.form1.gender[1].checked == false)
{
alert("please choose your gender");
return false;
}

return( true );
}
</script>


In the script above we have checked the value name input whether textbox is empty or if something is written in it. After that we checked the value for pincode whose lenght should be equal to 6 characters and all the character should be numbers which we have checked using isNaN function where NaN stands for not a number. Select-option is checked by comparing value and in the checkboxes and radio buttons are validated by checking the value of checked attribute whether is tru or false.