jQuery provides a validation plugin or library to validate your form, all you have to do is just import it in your script and use it in a simple way.
But, here we will show you a simple programming approach to validate your form using jQuery without importing jQuery validation library or plugin.
Below example contains an HTML form with some fields, we used following Regular Expressions (RegEx) in our jQuery codes to set validation rules :
RegEx for Name field:
/^[a-zA-Z]+$/;
RegEx for Email field:
/^[w-.+]+@[a-zA-Z0-9.-]+.[a-zA-z0-9]{2,4}$/;
RegEx for Address field:
/^[0-9a-zA-Z]+$/;
RegEx for Postal Zip field:
/^[0-9]+$/;
About Regular Expression
It pre-defines characters in the particular form field. So, when user entered data into the fields, regular expression matches the data.
The field will accept that character which the regular expression allow it to do.
If the character does not match, then alert will be display that notifies about wrong input to user. You can check out below, what these characters means:
. : Matches any single charcter except a new line
+ : Matches the preceding character or repeated character.
$ : Matches character at the end of the line.
.: Matches only period.
^ : Matches the beginning of a line or string.
: Escapes a special character.
- : Range indicator. [a-z, A-Z]
-: Escapes a special character.(e.g. escaping - by -)
[0-9] : It matches digital number from 0-9.
[a-z] : It matches characters from lowercase ‘a’ to lowercase ‘z’.
[A-Z] : It matches characters from uppercase ‘A’ to lowercase ‘Z’.
w: Matches a word character and underscore. (a-z, A-Z, 0-9, _).
W: Matches a non word character (%, #, @, !).
{M, N} : Donates minimum M and maximum N value.
In our example, jQuery code get executes for each form field, which matches the user input value with above defined RegEx. If, it got perfect match then function returns true otherwise, false
To learn more, we have our complete HTML, jQuery and Regular Expression references given below.
HTML file: formvalid.html
<!DOCTYPE html>
<html>
<head>
<title>Form Validation jQuery:Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="formvalid.css" rel="stylesheet">
<script src="formvalid.js"></script>
</head>
<body>
<div class="main">
<h1>Form Validation Using jQuery</h1>
<div id="form">
<p id="head"></p> <!-- This Segment Displays The Validation Rule -->
<h2>Java script form validation</h2>
<form action="" method="post"> <!-- Form Starts From Here -->
<label>Full Name:</label>
<input id='firstname' type='text'>
<p id="p1"></p> <!--This Segment Displays The Validation Rule For Name-->
<label>Username(6-8 characters):</label>
<input id='username' type='text'>
<p id="p2"></p> <!-- This Segment Displays The Validation Rule For User Name -->
<label>Email:</label>
<input id='email' type='text'>
<p id="p3"></p> <!-- This Segment Displays The Validation Rule For Email -->
<label>State:</label>
<select id='state'>
<option>Please Choose</option>
<option>America</option>
<option>Australia</option>
<option>Sweden</option>
<option>Africa</option>
</select>
<p id="p4"></p> <!-- This Segment Displays The Validation Rule For Selection -->
<label>Address:</label>
<input id='addr' type='text'>
<p id="p5"></p> <!-- This Segment Displays The Validation Rule For Address -->
<label>Zip Code:</label>
<input id='zip' type='text'>
<p id="p6"></p> <!-- This Segment Displays The Validation Rule For Zip -->
<button id="submit">Check Form</button>
</form>
</div>
</div>
</body>
</html>
jQuery File: formvalid.js
$(document).ready(function() {
$('#submit').click(function(e) {
// Initializing Variables With Form Element Values
var firstname = $('#firstname').val();
var addr = $('#addr').val();
var zip = $('#zip').val();
var state = $('#state').val();
var username = $('#username').val();
var email = $('#email').val();
// Initializing Variables With Regular Expressions
var name_regex = /^[a-zA-Z]+$/;
var email_regex = /^[w-.+]+@[a-zA-Z0-9.-]+.[a-zA-z0-9]{2,4}$/;
var add_regex = /^[0-9a-zA-Z]+$/;
var zip_regex = /^[0-9]+$/;
// To Check Empty Form Fields.
if (firstname.length == 0) {
$('#head').text("* All fields are mandatory *"); // This Segment Displays The Validation Rule For All Fields
$("#firstname").focus();
return false;
}
// Validating Name Field.
else if (!firstname.match(name_regex) || firstname.length == 0) {
$('#p1').text("* For your name please use alphabets only *"); // This Segment Displays The Validation Rule For Name
$("#firstname").focus();
return false;
}
// Validating Username Field.
else if (!(username.length >= 6 && username.length <= 8) || username.length == 0) {
$('#p2').text("* Please enter between 6 and 8 characters *"); // This Segment Displays The Validation Rule For Username
$("#username").focus();
return false;
}
// Validating Email Field.
else if (!email.match(email_regex) || email.length == 0) {
$('#p3').text("* Please enter a valid email address *"); // This Segment Displays The Validation Rule For Email
$("#email").focus();
return false;
}
// Validating Select Field.
else if (state == "Please Choose") {
$('#p4').text("* Please Choose any one option"); // This Segment Displays The Validation Rule For Selection
$("#state").focus();
return false;
}
// Validating Address Field.
else if (!addr.match(add_regex) || addr.length == 0) {
$('#p5').text("* For Address please use numbers and letters *"); // This Segment Displays The Validation Rule For Address
$("#addr").focus();
return false;
}
// Validating Zip Field.
else if (!zip.match(zip_regex) || zip.length == 0) {
$('#p6').text("* Please enter a valid zip code *"); // This Segment Displays The Validation Rule For Zip
$("#zip").focus();
return false;
} else {
alert("Form Submitted Successfuly!");
return true;
}
});
});
CSS File: formvalid.css
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import "http://fonts.googleapis.com/css?family=Roboto+Slab";
body {
font-family:'Droid Sans',sans-serif;
font-size:14px
}
.main {
width:960px;
margin:10px auto
}
div#form {
margin-top:80px;
margin-left:10px;
padding:20px 0 20px 20px;
width:500px;
border:1px dashed #000;
float:left
}
h2 {
text-align:center;
font-family:'Roboto Slab',serif
}
p {
font-size:12px;
color:red;
margin-left:185px
}
h1 {
margin-top:50px;
margin-left:60px
}
input {
width:250px;
height:27px;
padding:10,0,0,10px;
margin-top:10px;
border:1px solid #e3e3e3
}
#firstname {
margin-left:110px
}
#username {
margin-left:10px
}
#email {
margin-left:140px
}
#state {
margin-left:145px;
margin-top:10px
}
#addr {
margin-left:122px
}
#zip {
margin-left:119px
}
#submit {
width:100px;
height:35px;
margin-top:20px;
border:1px solid #000
}
Conclusion:
Thus, using above mentioned regular expressions and jQuery codes, you can define your own validation rules for your forms. Keep reading our other blogs.
You may also like –
8 Replies to “jQuery Form Validation”
nice explan.
examples are very good
very nice example of jquery validation .
A simple example illustrating validation using jQuery. Liked it. Thanks a lot for this article.
From the above code how to alert unmatched fields?
ur validations not working my page …?
we are used bootstrap and so many css
its is very usefull example
i need validation jquery with plgin(without refress)…… +
this code was simple to understand. i understood the validation