jQuery 验证插件未在 form$.validate() 上进行验证

Posted 2023-05-09

【中文标题】jQuery 验证插件未在 form$.validate() 上进行验证

【英文标题】：jQuery validation plugin not validating on form$.validate()

【发布时间】：2014-04-07 20:36:12

【问题描述】：

我有一个页面已成功使用 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 定义了以下点击事件处理程序：

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 选项的各种值，将选项卡 div 更改为按钮——但没有成功。

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

感谢您阅读本文。

汤姆

【参考方案1】：

这是什么？

_form$.validate();

我从未见过这样命名的变量 (_form$)

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

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

    ....

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

通常，.validate() 仅在 DOM 就绪事件处理程序中调用一次，并且会自动捕获单击事件。您不能多次调用.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);
);