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方法/规则（the additional-methods.js file的一部分）来要求填写三个字段中的至少一个。然后保留required条件逻辑，以确保在填写first_name时强制last_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和showErrors回调函数，以更好地控制消息的显示方式/位置。

示例：

    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
        }
    }

DEMO 2：http://jsfiddle.net/sfte41jt/

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

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

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

1 个答案: