Question

我有一个页面已成功使用jQuery验证插件来验证多个文本字段。页面上有几个提交按钮，我已按如下方式配置验证器：

_validator = $("#ftsEditTripForm").validate({
    onkeyup: false,
    submitHandler: function() {}
});

我为页面上的所有提交按钮注册了以下点击事件处理程序：

function clickHandler(jqEvent) {
    var action = jqEvent.target.id;
    if (action !== "cancel") {
        _form$.validate();
        if (_validator.numberOfInvalids() === 0) {
            submitForm(action);
        }
    } else {
        confirmCancel(action);
    }
}
function submitForm(action) {
    $(".flowEvent").attr("name", "_eventId_" + action);
    if (action === "submit" ) {
        $("input[name=status]").val("S");
    } else {
        $("input[name=status]").val("D");
    }
    _form$[0].submit();
}

这一直很好。在用户单击其中一个提交按钮之前不会进行验证，如果该按钮是取消按钮，则要求用户确认他们想要丢失他们在页面实际提交之前在页面上所做的任何更改。因此，如果用户单击“取消”按钮，然后单击“否”按钮，表示他们不想继续取消操作，我们将停止提交页面。

现在我已经在导航栏中添加了标签，如果用户点击她现在所在页面的标签以外的标签，我需要做同样的事情。选项卡实现为div，我为这些div定义了以下click事件处理程序：

function tabClickHandler(jqEvent) {
    var target = jqEvent.target;
    while ( ! $(target).hasClass("navTab")) {
        target = target.parentNode;
    }
    var tabNumber = target.dataset.tabnumber;
    _form$.validate();
    if (_validator.numberOfInvalids() === 0) {
        $("input[name=tabNumber]").val(tabNumber);
        submitForm("navbar");
    }
}

我的问题是_validator.numberOfInvalids（）在单击选项卡时总是返回0。我在验证码中加了一个断点，当我点击一个标签时就不会调用它。因此，即使存在验证错误，也始终会提交页面。

我尝试了很多东西 - 验证插件的onsubmit和submitHandler选项的各种值，将tab div更改为按钮 - 没有成功。

我希望有人能指出我正确的方向。我必须以这种或那种方式工作，我想继续使用验证插件。

感谢您阅读此内容。

汤姆

Answer 1

这是什么？

_form$.validate();

我从未见过这样的变量（_form$）

您应该知道.validate()方法仅用于初始化表单上的插件。

function clickHandler(jqEvent) {
    var action = jqEvent.target.id;
    if (action !== "cancel") {
        _form$.validate();

    ....

因此，如果您在单击按钮之前未对其进行初始化，那么您根本不会进行任何验证。

通常，.validate()仅在DOM ready事件处理程序中调用一次，并且自动捕获click事件。由于忽略了所有后续实例，因此您不能多次调用.validate()。

由于您要忽略cancel按钮，因此如果按下取消按钮，您可以使用.rules('remove')方法有效取消验证。像这样......

$('#myCancelButton').on('click', function(e) {
    e.preventDefault();
    $('input, select, textarea').each(function() {
        $(this).rules('remove');  // remove all rules
    });
    // something to do on cancel
    confirmCancel(action);
});

jQuery验证插件未在表单$ .validate（）上验证

1 个答案: