My VIDEO courses:

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
  5. Video tutorial: How to create PHP Shopping cart using SESSION object variables
1 Star2 Stars3 Stars4 Stars5 Stars (35 votes, average: 3.43 out of 5)
Loading ... Loading ...

Comments (11)

SEO and CMS web design London May 1st, 2010 at 13:12    

How do I have this modified for I agree check box .Can some one help me please
thanks

Alex Flom May 1st, 2010 at 13:24    

Hi!

This is part of the tutorial.
Just watch the video.

Here is the code again:

if (agree.checked != 1)
{
alert(“You must agree to the rules”);
}

Youssef May 19th, 2010 at 14:22    

Hi there,
Thank you for the tutorial.
I have one problem, when I view the form in the browser and press the submit button it takes me to the page1_go.html page which is not valid.
please can you help me.

Many thanks

Alex Flom May 19th, 2010 at 14:25    

Hi Youssef!

You should change this line: <form name=”form1″ action=”page1_go.html” method=”get” >

Alex

Youssef May 19th, 2010 at 16:09    

Hi Alex, many thanks for your reply but I can’t see the line you mentioned in your reply which reads:
Hi Youssef!

You should change this line:

Alex

Sorry but which line do you mean?

Many thanks

Youssef

Alex Flom May 19th, 2010 at 16:12    

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

Youssef May 19th, 2010 at 16:40    

Sorry Alex for this, I am pretty new to javascript.

I tried to change the action but still get the same problem, I even deleted it and then I get no response from the button when I press it. (no alert box).
Please can you tell me what I have to change the line to.

Many thanks again

Youssef

Alex Flom May 19th, 2010 at 16:44    

You should have a page that is handling the information collected at the form(for example a php page that is storing the information into a database, a page that is displaying some info according to the collected fields and so on…).

In my example that page is: page1_go.html but you need to use your own.

Hope that helps…

Alex

Youssef May 19th, 2010 at 16:59    

Thank you soo much for all your help Alex, I will build my own page.

Blancpain Fifty Fathoms September 1st, 2010 at 16:34    

thank you for sharing.

Sasanka January 22nd, 2011 at 12:05    

Its a very helpful tutorial. Its really help me a lot.

Leave a reply

Name *

Mail *

Website

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word