Javascript Form / checkbox /radio button /list box validation

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:

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 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">

</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">

</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">

</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