Saturday, January 20, 2018

Simple Form Validation In JQuery Using Regular Expression

In this tutorial we are going to share some idea how to validate simple form using Jquery with the help of regular expression. As we know a regular expression is a special sequence of characters that helps you match or find other strings or sets of strings, using a specialized syntax held in a pattern.

Here we have created user registration form with the help of html and performing form validation using Jquery with the help of regular expression. We have covered below validation :
1. Username validation using regular expression.
2. Email Id Validation using regular expression.
3. Mobile Number Validation using regular expression.
4. Website URL Validation using regular expression.
5. Password Validation using regular expression.

In Case you want to build more understanding on Regular Expression Validation, Check out our blog archive below :

Simple Form Validation In JQuery Using Regular Expression
Index.html
Below lines of code helps you to design HTML from.
<html >
<head>
<link rel="stylesheet" type="text/css" href="design.css">
<script src="jquery.min.js"></script>
<script src="validation.js"></script>
</head>

<body>
<b>User Registration validation page using jQuery</b>
<div id="register">
<h3>User Registration Page</h3>
<form method="post" action="" name="login">

<label>Username</label>
<input type="text" id="username" autocomplete="off" />
<span class="errorMsg" id="errorusername">*Please provide the valid username.</span>

<label>Email</label>
<input type="text" id="emailid" autocomplete="off" />
<span class="errorMsg" id="erroremail">*Please provide the valid email-ID.</span>

<label>Mobile</label>
<input type="text" id="mobilenumber" autocomplete="off" />
<span class="errorMsg" id="errormobile">*Please provide the valid mobile number.</span>

<label>Website Link</label>
<input type="text" id="websiteurl" autocomplete="off" />
<span class="errorMsg" id="errorwebsite" >*Please provide the valid website url.</span>

<label>Password</label>
<input type="password" id="userpassword" autocomplete="off"/>
<span class="errorMsg" id="errorpassword" >*Please provide the valid password.</span>


<input type="submit" class="button" id="submitform" name="submitform" value="Register">
</form>
</div>

</body>
</html>


design.css
This consists of CSS style sheet file for above HTML form.
#register{
width: 300px; border: 1px solid #d6d7da; 
padding: 0px 15px 15px 15px; 
border-radius: 5px;font-family: arial; 
line-height: 16px;color: #333333; font-size: 14px; 
background: #ffffff;rgba(200,200,200,0.7) 0 4px 10px -1px;
margin: 100px auto;
}

form label, form input{display: block;margin-top: 10px;width: 90%}
form input{ 
padding: 10px;
border: solid 1px #BDC7D8; 

}
.button {
background-color: #00BFFF ;
border-color: #3ac162;
font-weight: bold;
padding: 12px 15px;
color: #ffffff;
}
.errorMsg{
 color: #cc0000;
 margin-bottom: 10px;
 display:none;
}
.sucessMsg{
 color: #6B8E23;
 margin-bottom: 10px;
}


validation.js
Here we are performing validation with the help of Jquery using regular expression concept. 
$(document).ready(function() { 
$( "#submitform" ).on( "click", function() {
 
 var username = $('#username').val();
 var emailid = $('#emailid').val();
 var mobilenumber = $('#mobilenumber').val();
 var websiteurl = $('#websiteurl').val();
 var userpassword = $('#userpassword').val();
    // Hiding error messages 
 $('.errorMsg').hide();
 
 if(checkUsername(username) == false){    
       $('#errorusername').show();    
       return false;    
 }else if(checkEmail(emailid) == false){    
    $('#erroremail').show(); 
       return false;       
 }else if(checkMobileNumber(mobilenumber) == false){    
       $('#errormobile').show();     
       return false;       
 }else if(checkUrl(websiteurl) == false){    
    $('#errorwebsite').show(); 
       return false;       
 }else if(checkPassword(userpassword) == false){    
    $('#errorpassword').show();     
       return false;       
 }else{
  alert("successful")
 }
  
});
});
//function used to check valid email
function checkEmail(email)
{
    //regular expression for email
    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    if(pattern.test(email)){
        return true;
    } else {
        return false;
    }
}

//function used to validate website URL
function checkUrl(url)
{
    //regular expression for URL
    var pattern = /^(http|https)?:\/\/[a-zA-Z0-9-\.]+\.[a-z]{2,4}/;
 
    if(pattern.test(url)){
        return true;
    } else {
        return false;
    }
} 

//function used to validate username
function checkUsername(username){
 //regular expression for username
    var pattern = /^[a-z0-9_-]{5,15}$/;
    if(pattern.test(username)){
        return true;
    }else{
        return false;
    }
}

//function used to validate password
function checkPassword(password){
 //regular expression for password
    var pattern = /^.*(?=.{8,})(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%&]).*$/;
    if(pattern.test(password)){
        return true;
    }else{
        return false;
    }
}
//function used to validate mobile number
function checkMobileNumber(mobile){
 //regular expression for mobile number
    var pattern = /^[0-9]{10}$/;
    if(pattern.test(mobile)){
        return true;
    }else{
        return false;
    }
}

Video Link :


Download Link :

This all about simple form validation using Jquery. Please Let me know you comments below in case of any queries.


No comments:

Post a Comment