Golang React JS Technology Blog

jQuery simple form validations between start date and end date

Example



<!DOCTYPE html>
<html>
<head>
<style>
body {
    padding: 20px;
}

label {
    display: block;
}

input.error {
    border: 1px solid red;
}

label.error {
    font-weight: normal;
    color: red;
}

button {
    display: block;
    margin-top: 20px;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script>
$(function () {
    $.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);
            setTimeout($.proxy(

            function () {
                this.element(end);
            }, this), 0);
            // Ensure clearing the 'flag' happens after the validation of 'end' to prevent endless looping
            setTimeout(function () {
                $(element).data('validation.running', false);
            }, 0);
        }
        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);
            setTimeout($.proxy(

            function () {
                this.element(start);
            }, this), 0);
            setTimeout(function () {
                $(element).data('validation.running', false);
            }, 0);
        }
        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) { 
            alert('valid form submitted'); 
            return false; 
        }
    });
});
</script>
</head>
<body>
<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>
</body>
</html>
Most Helpful This Week
Get largest number from each sub-arrays How to join string with number in JavaScript? Using jQuery add new table row on click jQuery example of scroll to top jQuery show input text inside div after on click event How to change the height of Textarea on click?