Validating Ranges, Emails, and URLs with jQuery`s Validator Plug-in - Review: the rangelength, min and max options
(Page 2 of 4 )
Before I proceed to explain how the Validator plug-in can be used for checking numeric ranges, URLs and email addresses, I'm going to reintroduce the examples created in the previous article. They showed how to validate length ranges, as well as minimal and maximal values.
Having said that, here’s the full source code corresponding to the examples in question:
(example on using the ‘rangelength’ option)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example on validating web form with rangelength argument</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#sampleform").validate({
rules: {
fname: {
required: true,
rangelength: [2, 6]
},
lname: {
required: true,
rangelength: [2, 6]
},
email: {
required: true,
rangelength: [5, 10]
}
}
});
});
</script>
</head>
<body>
<form id="sampleform" method="post" action="process_form.php">
<p>First Name <input name="fname" class="required" /></p>
<p>Last Name <input name="lname" class="required" /></p>
<p>Email Address <input name="email" class="required" /></p>
<p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
(example on using the ‘min’ option)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example on validating web form with min argument</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#sampleform").validate({
rules: {
day: {
required: true,
min: 1
},
month: {
required: true,
min: 1
},
year: {
required: true,
min: 1920
}
}
});
});
</script>
</head>
<body>
<form id="sampleform" method="post" action="process_form.php">
<p>Day <input name="day" class="required" /></p>
<p>Month <input name="month" class="required" /></p>
<p>Year <input name="year" class="required" /></p>
<p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
(example on using the ‘max’ option)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example on validating web form with max argument</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#sampleform").validate({
rules: {
day: {
required: true,
max: 31
},
month: {
required: true,
max: 12
},
year: {
required: true,
max: 2008
}
}
});
});
</script>
</head>
<body>
<form id="sampleform" method="post" action="process_form.php">
<p>Day <input name="day" class="required" /></p>
<p>Month <input name="month" class="required" /></p>
<p>Year <input name="year" class="required" /></p>
<p><input type="submit" value="Submit" /></p>
</form>
</body>
</html>
As you’ll surely recall, the “rangelength” option can be used to find out whether or not data entered into a specific form field is within a determined range of lengths, as shown in the first example. The other two code samples simply show how to make use of the “min” and “max” arguments to validate independently minimal and maximal values. That was really easy to grasp, wasn’t it?
Having reviewed the examples developed in the previous part of the series, I'm going to explain how to use the Validator plug-in for checking entire numeric ranges (the equivalent process to using the “min” and “max” options simultaneously), as well as email addresses and URLs.
To learn how to perform all of these useful tasks with Validator, you’ll have to click on the link shown below and keep reading.
Next: Introducing the range argument >>
More JavaScript Articles
More By Alejandro Gervasio
