1

使用 jQuery 移动日期框时，我遇到了 jQuery 验证问题。

我将验证设置为：

onkeyup: false

我相信这会触发对焦点/模糊（选项卡）事件的验证。

问题是，当我使用日期框选择器设置日期时，它似乎不会触发此事件，所以如果我有一个日期框，其日期为“必需”并且已填写，错误消息仍会显示...

编辑：

这是我的小提琴：

http://jsfiddle.net/3v2ZV/

HTML

<form id="my_form" method="post">
    <input name="name" id="full-name" data-theme="a" placeholder="Name" class="required">
    <input name="athlete_datebox" id="athlete_datebox" data-theme="a" placeholder="Date of Birth" class="required">
    <input type="submit" value="submit">
</form>

JS

$(document).ready(function () {
    $('#my_form').validate({
        onkeyup: true
    });
    $('#athlete_datebox').mobiscroll().date({
        theme: 'jqm',
        display: 'modal',
        mode: 'clickpick',
        dateOrder: 'mmD ddyy',
        dateFormat: 'yy-M-dd',
        endYear: 2034
    });
    $('#my_form').on('submit', function (event) {
        event.stopPropagation();
        event.preventDefault();
        if ($('#my_form').valid()) {
            alert('is valid');
        }
    });
})

如果您在填写任何内容之前点击“提交”，您会看到这两个字段都是必需的。但是，在使用 mobiscroll 日期选择器填写日期后，该字段仍列为必填字段，即使它不为空。

4

1 回答 1

4

“我的验证设置为：

onkeyup: false

我相信这会触发对焦点/模糊（选项卡）事件的验证。”

您只是关闭了该onkeyup事件。该onfocusout事件是一个完全不同的选项，默认情况下“打开”，除非您也将其关闭。

由于您没有提供代码，因此我无法为您提供更详细的解决方案。

但是，您描述的问题可能可以通过使用日期选择器中内置的回调函数（哪个？）来解决。像“on change”或“on select”之类的东西，如果它有这些可用的话。

然后在回调函数中，您需要调用jQuery Validate 插件的.element()方法，该方法以编程方式触发仅对该特定元素的验证测试。

$('#myform').validate().element('#myelement');

如果它没有回调函数，你可以尝试这样的事情，它利用元素的jQuerychange事件。

$('#myelement').on('change', function() {
    $('#myform').validate().element('#myelement');
});

编辑：

关于您的 jsFiddle 中的代码。

1）不要在选项后放置分号validate。这会破坏插件。

2）不要使用submit处理程序来检查表单是否有效。内置submitHandler回调已经这样做了。

3) 你的</form>标签是拼写的</for>

OP 的修改：http: //jsfiddle.net/3v2ZV/4/

于 2013-03-25T15:49:39.803 回答