Documentation
Plugins/Validation/multiplefields
From jQuery JavaScript Library
How to validate a date range with custom message grouping and placement.
// a custom method for validating the date range
$.validator.addMethod("dateRange", function() {
return new Date($("#fromDate").val()) < new Date($("#toDate").val());
}, "Please specify a correct date range, the first must be before the second.");
// a new class rule to group all three methods
$.validator.addClassRules({
requiredDateRange: {required:true, date:true, dateRange:true}
});
// overwrite default messages
$.extend($.validator.messages, {
required: "These fields are required",
date: "Please specify valid dates"
});
var form = $("#dateRangeForm")
form.validate({
submitHandler: function() {
alert("Valid date range!")
},
groups: {
dateRange: "fromDate toDate"
},
errorPlacement: function(error) {
form.find(".errorContainer").append(error);
}
});
$("#validate").click(function() {
form.valid();
return false;
});
$("#fix").click(function() {
$("#toDate").val("1995/02/06")
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script>
$(document).ready(function(){
// a custom method for validating the date range
$.validator.addMethod("dateRange", function() {
return new Date($("#fromDate").val()) < new Date($("#toDate").val());
}, "Please specify a correct date range, the first must be before the second.");
// a new class rule to group all three methods
$.validator.addClassRules({
requiredDateRange: {required:true, date:true, dateRange:true}
});
// overwrite default messages
$.extend($.validator.messages, {
required: "These fields are required",
date: "Please specify valid dates"
});
var form = $("#dateRangeForm")
form.validate({
submitHandler: function() {
alert("Valid date range!")
},
groups: {
dateRange: "fromDate toDate"
},
errorPlacement: function(error) {
form.find(".errorContainer").append(error);
}
});
$("#validate").click(function() {
form.valid();
return false;
});
$("#fix").click(function() {
$("#toDate").val("1995/02/06")
});
});
</script>
</head>
<body>
<form id="dateRangeForm">
<input id="fromDate" name="fromDate" class="requiredDateRange" value="1995/01/06" />
<input id="toDate" name="toDate" class="requiredDateRange" value="1995/01/05" />
<span class="errorContainer"></span>
<br/>
<button id="validate">Validate form</button>
<button id="fix">Fix second field</button>
</form>
</body>
</html>