Jquery Validation with Regular Expressions

This time I want to explain about “Form validation using regular expressions with jquery”. I had developed a tutorial using jquery.validate plugin, It’s very simple. Implement this and enrich your web projects.

Jquery Validation with Regular Expressions
Jquery Validation with Regular Expressions

Perfect Javascript Form Validation using Regular Expressions
Server Side Form Validation using Regular Expressions

Javascript code
More details about regular expressions. Take a look at this tutorial

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function() {

    $.validator.addMethod("email", function(value, element) {  
    return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);  
    }, "Please enter a valid email address.");
     
   $.validator.addMethod("username",function(value,element){
    return this.optional(element) || /^[a-zA-Z0-9._-]{3,16}$/i.test(value);  
    },"Username are 3-15 characters");


    $.validator.addMethod("password",function(value,element){
    return this.optional(element) || /^[A-Za-z0-9!@#$%^&*()_]{6,16}$/i.test(value);  
    },"Passwords are 6-16 characters");


    $.validator.addMethod("phone", function(value, element) {  
    return this.optional(element) || /^[0-9-+]{10}$/i.test(value);  
    }, "Please enter a 10 digit valid phone number.");


        // Validate signup form
        $("#signup").validate({
                rules: {
                        email: "required email",
            username: "required username",
                        password: "required password",
            phone: "required phone",

                },
        

        });

    });

</script>

HTML code
Contains simple HTML code

<form method="post" action="thankyou.html" name="signup" id="signup">
        <b>Email</b><br />
        <input type="text" name="email" id='email'/>
        <br />
        <b>UserName</b><br />
        <input type="text" name="username" id="username" />
        <br />
        <b>Password</b><br />
        <input type="password" name="password"  id="password" />
        <br />
        <b>Phone</b><br />
        <input type="text" name="phone" id="phone" />
        <br />
        <br />
        <input type="submit" value=" Sign-UP " name='submit' id="submit"/>
   </form>

CSS code

* {
  margin:0px;
  padding:0px;
}
body {
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
}
input {
  width:220px;
  height:25px;
  font-size:13px;
  margin-bottom:10px;
  border:solid 1px #333333;
}
label.error {
  font-size:11px;
  background-color:#cc0000;
  color:#FFFFFF;
  padding:3px;
  margin-left:5px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

 

Please follow and like us:

Add a Comment