Ultra fast cheap  linux and windows hosting
javascript tutorial Browse Basic JavaScript Tutorial
Browse JavaScript Script resources
Browse javascript FAQS
Categories:

javascript tutorial
buy template
Home >> Tutorials >> Advanced javascript tutorials

Javascript- Form:
 
Form validation Set field value
Checkbox example Radio box example
Move slected values from one list box to another


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:

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: &nbsp;</font><input type="text" value="" name="username" size=30></dt>

<dt> <font face="Verdana">E-mail: &nbsp;</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>&nbsp; &nbsp;</font></font>

</pre>

</body>

</html>

Javascript radio buttons validation
Suppose you have a radio button in your form and you want the useres to select atleast 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:


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 validation,list validation,select list validation,listbox validation using javascript
javascript tutorial
javascript book
Buy this book