jQuery UI Datepicker with altfields: Validation not firing when it should

问题

I have 3 datepickers (startdate, enddate and duedate) on my form and the dates that are picked are printed in their respective altfields. I have the date validation rules setup to validate the values in the altfields and not the datepickers themselves (I tried validating on the datepickers but it did nothing).

The only rules are the they are required and that the enddate and duedate must be greater than the startdate.

If I pick an endate or duedate that is equal to the startdate I don't get any validation errors as expected until I click the submit button or if I give focus to the altfield then click away (focus lost).

Is there a way to manually validate these inputs when a date is selected in the datepicker?

Here is the demo

Here is the code:

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">    
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
    <title>Goals</title>
    <link rel="stylesheet" type="text/css" href="../style/jquery-ui-1.9.2.custom.min.css"
    />
    <script src="../include/jquery.validate.min.js" type="text/javascript"></script>
    <style type="text/css">
        * {
            font-family: Verdana;
            font-size: 96%;
        }
        label {
            width: 10em;
            float: left;
        }
        label.error {
            float: none;
            color: red;
            padding-left: .5em;
            vertical-align: top;
        }
        p {
            clear: both;
        }
        .submit {
            margin-left: 12em;
        }
        em {
            font-weight: bold;
            padding-right: 1em;
            vertical-align: top;
        }
        .ui-widget {
            font-size: 1em;
        }
        .ui-slider-horizontal {
            display: inline-block;
            width: 30em;
        }
        .ui-slider-vertical {
            display: inline-block;
            float: left;
            margin: 0em 2em 1em 0em;
        }
    </style>
    <form id="newusergoal" method="post">
        <fieldset>
            <legend>Add a New Goal</legend>
            <label for="startdate">Start Date:</label>
            <br/>
            <div id="startdateselect"></div>
            <br/>
            <br/>
            <input type="text" name="startdate" id="startdate" readonly="true" />
            <br/>
            <br/>
            <br/>
            <label for="enddate">End Date:</label>
            <br/>
            <div id="enddateselect"></div>
            <br/>
            <br/>
            <input type="text" name="enddate" id="enddate" readonly="true" />
            <br/>
            <br/>
            <br/>
            <label for="duedate">Due Date:</label>
            <br/>
            <div id="duedateselect"></div>
            <br/>
            <br/>
            <input type="text" name="duedate" id="duedate" readonly="true" />
            <br/>
            <br/>
            <br/>
            <input type="submit" name="submit" id="submit" value="Save New Goal" />
        </fieldset>
    </form>

js:

$(document).ready(function () {
$("#newusergoal").validate({
    rules: {
        startdate: {
            required: true
        },
        enddate: {
            required: true,
            greaterThan: "#startdate"
        },
        duedate: {
            required: true,
            greaterThan: "#startdate"
        }
    },
messages: {
    startdate: {
        required: "Goal must have a start date"
    },
    enddate: {
        required: "Goal must have an end date",
        greaterThan: "End date must be greater than the start date"
    },
    duedate: {
        required: "Goal must have an due date",
        greaterThan: "Due date must be greater than the start date"
    }
}
});

$("#startdateselect").datepicker({
    minDate: 0,
    maxDate: "10Y",
    dateFormat: "yy-mm-dd",
    hideIfNoPrevNext: true,
    showButtonPanel: true,
    changeMonth: true,
    changeYear: true,
    altField: "#startdate"
});
$("#enddateselect").datepicker({
    minDate: 0,
    maxDate: "10Y",
    dateFormat: "yy-mm-dd",
    hideIfNoPrevNext: true,
    showButtonPanel: true,
    changeMonth: true,
    changeYear: true,
    altField: "#enddate"
});
$("#duedateselect").datepicker({
    minDate: 0,
    maxDate: "10Y",
    dateFormat: "yy-mm-dd",
    hideIfNoPrevNext: true,
    showButtonPanel: true,
    changeMonth: true,
    changeYear: true,
    altField: "#duedate"
});

jQuery.validator.addMethod(
    "greaterThan",

function (value, element, params) {
    if (!/Invalid|NaN/.test(new Date(value))) {
        return new Date(value) > new Date($(params).val());
    }

    return isNaN(value) && isNaN($(params).val()) || (Number(value) > Number($(params).val()));
},
    'Must be greater than {0}.');

});

回答1:

Quote OP: "Is there a way to manually validate these inputs... ?"

Use .element() to programmatically trigger a validation test on a single element.

$("#myform").validate().element("#myfield");

http://docs.jquery.com/Plugins/Validation/Validator/element#element

Demo: http://jsfiddle.net/vMNsy/

This demo shows how .element() is used to trigger a validation test on the first field on the DOM ready event. You can call it with your own custom event or function.

See this answer for something more specific...

https://stackoverflow.com/a/4635640/594235

$("#myfield").datepicker({
    onClose: function() {
        $("myform").validate().element("#myfield");
    }
});

Edit: As per comments, onClose event is not applicable to OP, but leaving code in place for the benefit of others.

来源：https://stackoverflow.com/questions/14834859/jquery-ui-datepicker-with-altfields-validation-not-firing-when-it-should

标签

jquery

jquery-ui

jquery-validate

jquery-ui-datepicker