Email Validation with jQuery

There are many ways to validate email address, the most famous way could be regular expression.
and now comes an easiest way, it is jQuery validation.

The benefits to do validation with jQuery are light weight, and jQuery performs client side validation, thus it can improve server performance by reducing server calls, and reduce bandwidth.

There are only three steps to go.


Steps:
1. Install jQuery and jQuery validation.

<script src="http://code.jquery.com/jquery-latest.js" /></script>

<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

for project already installed jQuery, the first line is not required.
and normally I will download the required js into the project and do local reference.

2. Create the form and input for email address

<form id="myform">
  <label >email: </label>
  <input name="emailAddr" />
</form>

3. Create the jQuery validation script

<script>
$(document).ready(function(){
  $("#myform").validate({
    rules: {
      emailAddr: {
        email: true
      }
    }
  });
});
</script>

Output:

related jQuery validation articles:
  - Credit card
  - Multiple form fields
  - Error message customization
  - Using jQuery validation plugin in JSF
  - Multilingual error messages
  - jQuery Validation Plugin localization
  - Error handling in jQuery Validation Plugin

Done!!