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
Edit the text of label on click using jQuery jQuery Show or Hide text on button click How to scroll page to 1000px from top on page load using jQuery? Using jQuery delete table row on click jQuery get the coordinates of div clicked Check if a string ends with the given target string