jquery 验证（使用 jquery 验证插件）- 根据单击的按钮激活特定元素的验证规则

Question

好吧，我在这里遇到了一个恼人的问题。我在研究中了解到，多次使用 validate() 是行不通的。因此，我设置了一个函数来响应单击的某些按钮的 onclick。这些按钮发送一个参数来标识要验证哪些元素。我这样做是因为我正在使用 .fadeOut()/.fadeIn() 从一个部分无缝移动到另一个部分。一旦您单击第一部分按钮（这会将您带到第二部分），它会验证第一部分中的元素，如果第一部分被视为“有效”，那么它将继续淡出/淡入到 b 部分......在。

问题是，虽然我已经为 a 和 b 部分设置了规则和消息，但 b 部分似乎仍然没有验证。

这是我的代码 -

  function validation(page) {
var rules;
var messages;
var validator;

if (page == 'secA') {
    rules = {
        /*gneral information validation*/
        gCompanyTxt: {
            required: true,
            minlength: 2
        }

    messages = {
        /*general info validator messages*/
        gCompanyTxt: {
            required: "The 'Company' text box is empty safgadfgad",
            minlength: "The 'Company' text box needs to have at least 2 characters"
        }
    };

    validator = new jQueryValidatorWrapper("form1", rules, messages);

} else if (page == 'secB') {
    rules = {
        txtFirst: {
            required: true,
            minlength: 2
        }
    };

    messages = {
        txtFirst: {
            required: "Your first name is required",
            minlength: "Your first name needs to be at least two characters"
        }
    };

    validator = new jQueryValidatorWrapper("form1", rules, messages);

}

if (!validator.validate()) {
    return;
} else {
    if (page == 'secA') {
        $('#secA').hide();
        $('#secB').fadeIn('slow');
    } else if (page == 'secTwo') {
        $('#secB').hide();
        $('#secC').fadeIn('slow');

    }
}
}

按钮是这样的：

 <button type = "button" class="buttonSale" id="btnA" onclick="validation('secA')">Proceed to Section B</button>

 <button type = "button" class="buttonSale" id="btnB" onclick="validation('secB')">Proceed to Section C</button>

结果是 - 当单击“btnA”时，代码有效地工作，如果内容为空或不正确，则会触发验证，我能够修复此问题，然后继续。然而，一旦我进入 b 部分并单击“btnB”，它只会转到下一页，并且似乎跳过 if 语句：

if (!validator.validate()) {
    return;
}

我想我只是在这里错过了一些非常简单的东西，但我厌倦了查看它并且需要专注于其他事情。谢谢！

Answer 1

这是使用 jQuery.Validate 吗？如果是这样，它只会验证屏幕上可见的元素，因此您不必执行任何特殊逻辑来更改规则。只需立即分配所有规则并确保它忽略隐藏的输入。

完成后，您可以绑定每个按钮上的单击事件，以使用 $(yourForm).validate().form() 检查表单的验证状态，并在返回时分页到下一个面板正确（有效）。流程中的最后一个按钮应该实际提交。