jQuery 验证：需要单个字段或单独的一对，或两者

Question

我有一个包含三个字段的简单表单：电子邮件、名字和姓氏。我想要求用户输入他们的电子邮件、他们的名字和姓氏，或者所有三个字段。理想情况下，我想显示以下错误消息：

如果他们在所有字段都为空的情况下单击提交，则会显示一条通用消息，指示他们必须输入电子邮件、名字和姓氏，或三者都输入
如果他们只输入名字，则会显示一条消息，指示他们也需要输入姓氏，反之亦然

我正在使用 jQuery Validate 并且很难完成此操作。如果只有两个字段，用户需要输入一个或另一个，或同时输入两个字段，这似乎是一项简单的任务。但我似乎无法为我的情况找到任何解决方案。这是我目前所拥有的（一点也不多）：

HTML:

    <form id="myform">
      <input type="text" id="email" name="email" placeholder="Email">
      <br />
      <input type="text" id="first_name" name="first_name" placeholder="First name">
      <br />
      <input type="text" id="last_name" name="last_name" placeholder="Last name">
      <br />
      <br />
      <input type="submit" />
    </form>

Javascript:

    $('#myform').validate({
      rules: {
        email: {


        },
        first_name: {
          required: function (element) {
            return !$("#last_name").is(":blank");
          }
        },
        last_name: {
          required: function (element) {
            return !$("#first_name").is(":blank");
          }
        }
      }
    });

这是相关的 JSFiddle。

我将如何获得我需要的功能？

Answer 1

您可以使用 require_from_group method/rule（the additional-methods.js file 的一部分）要求至少填写三个字段中的一个。然后保留您的 required 条件逻辑，以确保如果 last_name 已填写，则 first_name 是必需的，反之亦然。

$('#myform').validate({
    rules: {
        email: {
            require_from_group: [1, '.mygroup']
        },
        first_name: {
            require_from_group: [1, '.mygroup'],
            required: function(element) {
                return !$("#last_name").is(":blank");
            }
        },
        last_name: {
            require_from_group: [1, '.mygroup'],
            required: function(element) {
                return !$("#first_name").is(":blank");
            }
        }
    }
});

工作演示：http://jsfiddle.net/dct0c3u1/

查看 errorPlacement, groups, invalidHandler, and showErrors 回调函数以更好地控制 how/where 消息的显示。

示例：

    showErrors: function() {
        // using this callback to suppress default messages
        return false;
    },
    invalidHandler: function() {
        if (validate.numberOfInvalids() === 3) {
            $("#errorbox").html("enter either email, first and last name, or all three");

        } else {
            $("#errorbox").html("");
            validate.defaultShowErrors(); // show default messages
        }
    }

演示 2：http://jsfiddle.net/sfte41jt/

要获得更好的控制，请参阅 .showErrors() 方法，您可以在其中以编程方式切换消息...

http://jqueryvalidation.org/Validator.showErrors/

jQuery 验证：需要单个字段或单独的一对，或两者

jQuery validate: require either a single field or a separate pair, or both

jquery

jquery-validate