This is the first entry in a series that will cover many different types of input. First, we will make a form that can only be submitted when a user inputs a proper email address.

The Form

First things first, let build our HTML form.

<form method="post" action="">

<input id="email" type="text" name="email"/>

<input type="submit" name="emailSubmit" onclick="return checkEmail();"/>

</form>

Anything out of the ordinary here? First, you should notice the id=”email” in the email input box. Because of this id=”email” we are able to find out what the user has entered using JavaScript. Next,  in the submit input box, you should see onclick=”return checkEmail();”, which is what tells JavaScript to call our JavaScript function, which will validate the email address. ‘return’ is used because if the function returns false, it will not submit the form, but if it returns true, the form will be submitted.

The JavaScript

Here is the JavaScript for the validation. This should be placed between the head tags of the HTML document.

<script type="text/javascript">

 function checkEmail()
 {

 var email = document.getElementById('email').value;

 emailExpression = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;

 if(!email.match(emailExpression))
 {
 alert("Please enter a valid email!");
 return false;
 }

 return true;
 }

 </script>

First we create the function checkEmail which will run when the submit button is pressed. Next we grab what the user has entered in the email box with the line: var email = document.getElementById(‘email’).value; We store this value in the email variable. Next, we create our regular expression, which will be used to validate the email address.

You will then find an IF statement. This is used to actually compare the regular expression to the email variable, which we got from the form. If it does not match, an alert is placed on screen, and the form IS NOT submitted, however if it is an email address, the statement returns true and the form is submitted as normal.

I hope that this helps you begin to understand how you can validate forms on the client side using JavaScript. I will be expanding this series to include new types of input validation and ways of notifying the user.