Saturday, May 4, 2013

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:
email validation with jQuery


Done!!


LinkWithin

Related Posts Plugin for WordPress, Blogger...