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 :
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 :
- Build Basic Understanding About Regular Expression.
- User Defined Function to validate Regular Expression
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