Question

我的表单上有3个datepickers（startdate，enddate和duedate），所选的日期打印在各自的altfields中。我有日期验证规则设置来验证altfields中的值而不是datepickers本身（我尝试在datepickers上验证，但它没有做任何事情）。

唯一的规则是它们是必需的，并且enddate和duedate必须大于startdate。

如果我选择一个等于startdate的endate或duedate，我没有按预期得到任何验证错误，直到我点击提交按钮或者如果我将焦点放在altfield上然后点击离开（焦点丢失）。

当在datepicker中选择日期时，有没有办法手动验证这些输入？

以下是demo

以下是代码：

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}.');

});

Answer 1

引用OP ：＆＃34;有没有办法手动验证这些输入......？＆＃34;

使用.element()以编程方式触发单个元素的验证测试。

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

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

演示：http://jsfiddle.net/vMNsy/

此演示展示了.element()如何用于在DOM ready事件的第一个字段上触发验证测试。您可以使用自己的自定义事件或函数来调用它。

有关更具体的内容，请参阅此答案......

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

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

修改：根据评论，onClose事件不适用于OP，但为了其他人的利益而保留代码。

带有altfields的jQuery UI Datepicker：验证不应该触发它

1 个答案: