tg_9876

Home >> Tutorials >> Javascript tutorials


Javascript Form Validation
Javascript form validation is commonly used program in webdesign. Form validation is the process of checking that a form has been filled in correctly before it is processed.

For example, if your form has a box for the user to type their email address, you might want your form handler to check that they’ve filled in their address before you deal with the rest of the form.There are a number of different types of fields that you can use in forms on your web site. The types of form fields that are supported by HTML are:
text fields
password fields
radio buttons
check boxes
drop down lists
submit button
reset button
other buttons
image buttons and text areas.

In a web form,you may want to have certain fields mandatory. This example will be handy in such cases. 
The following example shows how to do text field validation and textarea validation using javascript.
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> 
<html> 
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
</head> 
<body> 
   <b><font face="Verdana"><font size=+1>Form Validation Example: Feedback Form</font></font></b> 
  <br><script LANGUAGE="JavaScript"> 
<!--function ValidateForm(form){ 
    ErrorText= ""; 
    if (form.username.value == "") {ErrorText= "\nPlease enter your name"}    if ((form.email.value == "" || form.email.value.indexOf('@', 0) == -1) || form.email.value.indexOf('.') == -1){ 
        ErrorText+=     "\nPlease enter a proper value for your email"} 
        if (form.feedback.value == "") {ErrorText+= "\nPlease enter your feedback"} 
        if (ErrorText!= "") { 
        alert("Error :" + ErrorText); 
        return false; 
     } 
       if (ErrorText= "") { form.submit() } 
} --> 
</script><br><form name="feedback" action="mailto:webgimmicks@email.com" method=post> 
<dl> 
<dt> 
<font face="Verdana"> 
<pre> 
Please enter the following(To test form validation, skip entering one of the fields and click 'Submit' button): 
</pre> 
</font> 
<font face="Verdana">Name:  </font><input type="text" value="" name="username" size=30></dt> 
<dt> <font face="Verdana">E-mail:  </font><input type="text" value="" name="email" size=30></dt> 
<dt> <font face="Verdana">Feedback:</font></dt> 
<dt><textarea rows=7 cols=60 name="feedback"></textarea></dt> 
</dl> 
<input type="button" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)"> 
<input type="reset" value="Reset"> 
</form> 
<pre><font face="Verdana"><font size=+0>   </font></font> 
</pre> 
</body> 
</html>
Javascript radio buttons validation 
Suppose you have a radio button in your form and you want the users to select at least one option. You can do this by using javascript radio button validation script.See the example below.

Your Gender: Male Female


Put the following piece of javascript in your function
function ValidateForm(form) 
if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == false ) ) { alert ( "Please choose your Gender: Male or Female" ); return false; } 


Try the following code:

<script LANGUAGE="JavaScript">
<!-- 
function ValidateForm(form){ 
ErrorText= ""; 
if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == false ) ) { alert ( "Please choose your Gender: Male or Female" ); return false; }
if (ErrorText= "") { form.submit() } 
} 
-->
</script>
<br><form name="feedback" action="mailto:webgimmicks@email.com" method=post>
Your Gender: <input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female 
<input type="button" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)"> 
<input type="reset" value="Reset"> 
</form>
Validating checkboxes using javascript 
Suppose you have a checkbox in your form and you want the users to select that before submiting the form. You can use Javascript checkbox validation script. See the example below.
Do you agree to the Terms and Conditions?  Yes
Put the following Javascript in your function function ValidateForm(form) 
if ( form.terms.checked == false ) { alert ( "Please check the Terms & Conditions box." ); return false; } 


Try the following code:

<script LANGUAGE="JavaScript">
<!-- 
function ValidateForm(form){ 
ErrorText= ""; 
if ( form.terms.checked == false ) { alert ( "Please check the Terms & Conditions box." ); return false; }
if (ErrorText= "") { form.submit() } 
} 
-->
</script>
<br><form name="feedback" action="mailto:webgimmicks@email.com" method=post>
Your Gender: <input type="checkbox" name="terms" value="Yes"> Yes
<input type="button" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)"> 
<input type="reset" value="Reset"> 
</form>
Validating drop-down lists (select list validation) using javascript 
Suppose you have a drop-down lists in your form and you want the user to select the option before submiting the form. You can do this by using select list validation script.See the example below
Your Age:  Please Select an Option: 0-18 years 18-30 years 30-45 years 45-60 years 60+ years 
Put the following Javascript validation script in your function function ValidateForm(form) 
if ( form.age.selectedIndex == 0 ) { alert ( "Please select your Age." ); return false; } 


Try the following code:

<script LANGUAGE="JavaScript">
<!-- 
function ValidateForm(form){ 
ErrorText= ""; 
if ( form.age.selectedIndex == 0 ) { alert ( "Please select your Age." ); return false; } 
if (ErrorText= "") { form.submit() } 
} 
-->
</script>
<br><form name="feedback" action="mailto:webgimmicks@email.com" method=post>
Your Age: <select name="age"> <option value="">Please Select an Option:</option> <option value="0-18 years">0-18 years</option> <option value="18-30 years">18-30 years</option> <option value="30-45 years">30-45 years</option> <option value="45-60 years">45-60 years</option> <option value="60+ years">60+ years</option> </select>
<input type="button" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)"> 
<input type="reset" value="Reset"> 
</form>
Top
 

Page contents: itechies.net – Learn how to do form validation,textfield/textarea validation,checkbox validation,radio button