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.
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.
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 type="text/javascript" src="http://ajax.googleapis.com/ajax
/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></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");
// Validate signup form
$("#signup").validate({
rules: {
email: "required email",
username: "required username",
password: "required password",
},
});
});
</script>HTML code
Contains simple HTML code
<form method="post" action="thank.html" name="signup" id="signup">
Email<br />
<input type="text" name="email" id='email'/><br />
UserName<br />
<input type="text" name="username" id="username" /><br />
Password<br />
<input type="password" name="password" id="password" /><br />
<input type="submit" value=" Sign-UP " name='SUBMIT' id="SUBMIT"/>
</form>CSS code
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;
}In our previous tutorial you have learned Live Table Edit with Jquery and Ajax. In this tutorial you will learn Live HTML table edit or inline table edit is a very user friendly feature that enable users to edit HTML table value directly by clicking on table cells. In this tutorial you will learn how to implement live editable HTML table with jQuery and PHP. We will use jQuery plugin Tabledit that provides AJAX enabled in place editing for HTML table cells.
Good luck and I hope this article can be useful. See you in the next article…
If you enjoyed this tutorial and learned something from it, please consider sharing it with our friends and followers! Also like to my facebook page to get more awesome tutorial each week!
Also Read :
PHP Database Backup Client for MySQL
How to Backup MySQL Database using PHP
Update/Delete Multiple Rows using PHP
Ajax Pagination with Tabular Records using PHP and jQuery
Sendmail in PHP using mail(), SMTP with Phpmailer
PHP session time set unset and check existence