Date range validation example

by jinglesthula

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<form id="myform">
    <input type="text" name="startDate" id="startDate" class="validDate" />
    <br/>
    <input type="text" name="endDate" id="endDate" class="validDate" />
    <br/>
    <input type="submit" />
</form>

CSS

.error {
    background:#fcc;
}

JavaScript

$(function() {
    // simple date mm/dd/yyyy format
    $.validator.addMethod('validDate', function(value, element) {
		return this.optional(element) || /^(0?[1-9]|1[012])[ /](0?[1-9]|[12][0-9]|3[01])[ /][0-9]{4}$/.test(value);
	}, 'Please provide a date in the mm/dd/yyyy format');
    
    $.validator.addMethod('dateBefore', function(value, element, params) {
		// if end date is valid, validate it as well
		var end = $(params);
		if (!end.data('validation.running')) {
			$(element).data('validation.running', true);
			this.element(end);
			$(element).data('validation.running', false);
		}
		return this.optional(element) || this.optional(end[0]) || new Date(value) < new Date(end.val());
		
	}, 'Must be before corresponding end date');

	$.validator.addMethod('dateAfter', function(value, element, params) {
		// if start date is valid, validate it as well
		var start = $(params);
		if (!start.data('validation.running')) {
			$(element).data('validation.running', true);
			this.element(start);
			$(element).data('validation.running', false);
		}
		return this.optional(element) || this.optional(start[0]) || new Date(value) > new Date($(params).val());
		
	}, 'Must be after corresponding start date');
    $('#myform').validate({ // initialize the plugin
        rules: {
            startDate: {dateBefore: '#endDate', required: true},
            endDate: {dateAfter: '#startDate', required: true}
		},
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });
});