JavaScript tutorial validate form: Textboxes, select , check box – components and EMAIL validation

In this video I will show you how to validate forms using Java Script.

I will teach you to validate different form components such as:

Text box – check if it is empty.

Checkbox – if it is checked.

Option box if it is selected.

I will also introduce a technique to validate if email that was entered is valid or fake.

And this is the second part of this tutorial:

Here is the code I have used in this lesson:

<script language=”javascript”>
function validat(agree,empty,email,select_box){
if (empty.value == ”){
alert(“You must enter a text”);
return false;
}
if (agree.checked != 1){
alert(“You must agree to the rules”);
return false;
}
if (select_box.value == ‘0′){
alert(“You must select an option”);
return false;
}

if (email.value.search( /^[a-zA-Z]+([_\.-]?[a-zA-Z0-9]+)*@[a-zA-Z0-9]+([\.-]?[a-zA-Z0-9]+)*(\.[a-zA-Z]{2,4})+$/ ) == -1){
alert(“Wrong email”);
return false;
}

}
</script>

<form name=”form1″ action=”page1_go.html” method=”get” >

Empty: <br />
<input name=”empty” type=”text” /><br /><br />

Check box: <input name=”agree” type=”checkbox” value=”" /><br /><br />

<select name=”select_box”>
<option value=”0″>Please choose</option>
<option value=”1″>Option 1 </option>
<option value=”2″>Option 2 </option>
</select><br /><br />

Email: <br />
<input name=”email” type=”text” size=”35″/>

<input name=”submin” type=”submit” value=”Go!” onclick=”return validat(agree,empty,email,select_box)”/>

</form>

Of course if something is unclear you are welcome to ask questions.

Related Posts

1. Video tutorial: Form validation in Macromedia Dreamweaver
2. How to create secure PHP script login form page using session video tutorial
3. Video tutorial: Image opacity effect with CSS and JavaScript events
4. CSS video tutorial: How to create rounded corners box simple effect with photoshop and css

(10 votes, average: 3.30 out of 5)

 Loading ...