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
jQuery simple form with name and email validations How to check if an element or HTML tag exists using JavaScript? How to change text after click event using JavaScript? JavaScript simple alert on Click JavaScript example to change image on click JavaScript calculate Fahrenheit from Celsius