JavaScript Form Validation

JavaScript can be used to validate data in HTML forms before sending off the content to a server. JavaScript also lets you display helpful alerts to inform the user what information they have entered incorrectly and how they can fix it. Let’s see how to validate all form fields.

Form INPUT filed

<script type="text/javascript">
function validation(myform)
{
if(myform.firstname.value == "")
{
alert("Enter First Name");
document.getElementById('firstname').style.border='1px solid #FF0000';
myform.firstname.focus();
return false;
}
else
{
return false;
}
}
</script>

<form name="frmvalidation" onSubmit="javascript:return validation(this);">
First Name : <input type="text" name="firstname" id="firstname">
<input type="submit" value="Submit">
</form>

Here in form onSubmit called validation() function. In that validation() function just checked whether form field is null (“”) or not. If null then showing alert message and changing field border color as red and focus that form field and return false to avoid form submit. Note in else loop just return false for avoiding form submit for testing.

Display

First Name :

Form TEXTAREA field

<script type="text/javascript">
function texrarea_validation(myform)
{
if(myform.address.value == "")
{
alert("Enter Address");
document.getElementById('address').style.border='1px solid #FF0000';
myform.address.focus();
return false;
}
else
{
return false;
}
}
</script>

<form name="frmvalidation" onSubmit="javascript:return texrarea_validation(this);">
Address : <textarea name="address" id="address" rows="2" cols="30"></textarea>
<input type="submit" value="Submit">
</form>

Here in form onSubmit called textarea_validation() function. In that textarea_validation () function just checked whether form field is null (“”) or not. If null then showing alert message and changing field border color as red and focus that form field and return false to avoid form submit. Note in else loop just return false for avoiding form submission for testing.

Display:

Address :

Form SELECT/DROP-DOWN field

<script type="text/javascript">
function selectbox_validation(myform)
{
if(myform.sex.selectedIndex==0)
{
alert("Select Sex");
document.getElementById('sex').style.border='1px solid #FF0000';
myform.sex.focus();
return false;
}
else
{
return false;
}
}
</script>

<form name="frmvalidation" onSubmit="javascript:return selectbox_validation(this);">
Sex :
<select name="sex" id="sex">
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
<input type="submit" value="Submit">
</form>

Here in form onSubmit called selectbox_validation() function. In that selectbox_validation() function just checked whether form selectedIndex is zero or not. If zero then showing alert message and changing field border color as red and focus that form field and return false to avoid form submit. Note in else loop just return false for avoiding form submission for testing.

Display:

Sex :


Form RADIO button

<script type="text/javascript">
function radio_validation(myform)
{
var myOption = -1;
for (i= myform.sex.length-1; i > -1; i–)
{
if (myform.sex[i].checked)
{
myOption = i;
i = -1;
}
}
if (myOption == -1)
{
alert("You must select a Sex");
return false;
}
else
{
return false;
}
}

</script>
<form name="frmvalidation" onSubmit="javascript:return radio_validation(this);">
Sex : <input type="radio" name="sex" id="sex" value="male"> Male
<input type="radio" name="sex" id="sex" value="female"> Female
<input type="submit" value="Submit">
</form>

Here in form onSubmit called radio_validation() function. In that radio_validation() get number of radio buttons ie get length of radio buttons. Then using for loop just checked anyone radio button is checked or not, if anyone checked then change the value of myOption variable and compare with -1. If no one selected then showing alert message and return false to avoid form submit. Note in else loop just return false for avoiding form submission for testing.

Display:

Sex : Male
Female

Form CHECKBOX validation

<script type="text/javascript">
function single_checkbox_validation(myform)
{
if (!myform.terms.checked)
{
alert('Please select Terms and Conditions Checkbox');
myform.terms.focus();
return false;
}
else
return false; // for testing now return false for avoiding form submit
}
</script>

<form name="frmvalidation" onSubmit=" single_checkbox_validation(this);">
<input type="checkbox" name="terms" value="termsandcond" id="terms"> Terms &amp; Conditions &nbsp;
<input type="submit" value="Submit">
</form>

The above example for how to validate single checkbox. Once click submit button the function single_checkbox_validation() will fire. In this function just checked whether the checkbox is checked or not. If not then just show alert message and focus that checkbox and return false to avoid form submission. Otherwise return true (in else loop return false for testing purpose only for avoiding form submission).

Display:

Terms & Conditions  

Form multiple CHECKBOX validation

In some cases we need multiple checkbox with same name. For example lets take colors checkbox, it has multiple colors but keeping same checkbox name as colors. So in this case how to validate these checkboxes, ie force user to check at least one checkbox. See below example;

<script type="text/javascript">
function checkbox_validation()
{
var chks = document.getElementsByName('colors[]');
var hasChecked = false;
for (var i = 0; i < chks.length; i++)
{
if (chks[i].checked)
{
hasChecked = true;
break;
}
}
if (hasChecked == false)
{
alert("Please select at least one color.");
return false;
}
else
return false; // for testing now return false.
}
</script>

<form name="frmvalidation" onSubmit="javascript:return checkbox_validation();">
<input type="checkbox" name="colors[]" value="blue" id="blue">Blue &nbsp;
<input type="checkbox" name="colors[]" value="red" id="red">red &nbsp;
<input type="checkbox" name="colors[]" value="green" id="green">green &nbsp;
<input type="submit" value="Submit">
</form>

See in the above example all the three checkboxes name as ‘colors’, because here we used more than one checkbox with same name here mentioned checkbox name like array colors[]. So after clicking submit button the function checkbox_validation() will fires, in that function get the number of checkbox using getElementsByName. Using for loop check any one checkbox is checked or not. If any one checked then change the value of hasChecked variable as true and break the loop.

Display:

 Blue  
 red  
 green  

Posted in Javascript