使用 jquery 验证验证内联 jquery Datepicker答案

【问题标题】：Validate an inline jquery Datepicker using jquery validation使用 jquery 验证验证内联 jquery Datepicker
【发布时间】：2011-12-17 00:03:35
【问题描述】：

我试图确保使用我的内联日期选择器选择了一个日期。内联日期选择器提供一个隐藏的输入框，所以很难要求它。为了尝试显示消息，我使用 invalidHandler 重新定位了我的错误消息。

我的代码：

<script type="text/javascript">
      jQuery('#date').datepicker({
        inline: true,   
        beforeShowDay: checkDayOfWeek,
        onSelect: function(dateText, inst) { $("#ship_date").val(dateText); }
      });
</script>

<div id="date" style="font-size: 75%;" class="required"></div>
<input type="hidden" name="ship_date" id="ship_date" class="required" />

我重新定位错误信息：

jQuery("#custform").validate({
invalidHandler: function(e, validator) {
    var errors = validator.numberOfInvalids();
    if (errors) {
        var message = errors == 1
            ? 'You missed 1 field. It has been highlighted below'
            : 'You missed ' + errors + ' fields.  They have been highlighted     below';
        $("div.error span").html(message);
        $("div.error").show();
    } else {
        $("div.error").hide();
    }           
},
});

我的目标：当有人在未选择日期的情况下提交表单时，系统会向他们显示一条消息，要求他们在提交表单之前输入日期。如果我们可以在日期选择器的 div 中添加一个类，那就更好了。

感谢阅读

【问题讨论】：

标签： jquery jquery-validate jquery-ui-datepicker

【解决方案1】：

你在使用 jQuery 验证器插件吗？如果是这样，您可以向隐藏字段添加一个类

<input type="hidden" class="required" id="field1" name="field1"/>

并将验证器选项忽略设置为 null，什么都不忽略...

$.validator.setDefaults({ ignore: '' });

(reference) 并且您会在隐藏字段所在的位置收到错误消息。如果它在日期字段附近，它看起来就像日期字段有味精。我以前在我的表单中这样做过。

希望这会有所帮助。

【讨论】：