使用 jquery mobile datebox (mobiscroll) 验证 jquery

Question

我在使用 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 日期选择器填写日期后，该字段仍列为必填字段，即使它不为空。

Answer 1

“我的验证设置为：

onkeyup: false

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

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

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

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

然后在回调函数中，您需要调用the jQuery Validate plugin's .element() method，它以编程方式触发仅对那个特定元素的验证测试。

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

如果它没有回调函数，您可以尝试使用元素的jQuery change event。

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

---

编辑：

关于 jsFiddle 中的代码。

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

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

3) 您的</form> 标签拼写为</for>

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