的 Here is the DEMO

Question

我的项目中有一个表单的结构，

<form action="somepage">
    <p>Account Number</p>
    <input type="text" size="3" name="accountNumberOne" class="my-form-group">
    <input type="text" size="3" name="accountNumberTwo" class="my-form-group">
    <input type="text" size="4" name="accountNumberThree" class="my-form-group">
    <span>OR</span>
    <p>Email ID</p>
    <input type="email" name="emailId" id="emailId">
</form>

如果用户填写帐号的所有3个框或电子邮件ID ，则该表单有效。如果她提交空白，则会显示两个字段的单个错误消息。我知道这可以使用jQuery验证器的 require_from_group 和 groups 属性来完成，但我无法一起实现它们。

任何帮助将不胜感激！

Answer 1

您可以使用以下简单示例。如果其中一个字段为空值，则会显示警告消息。所有输入必须完全符合某些数据，以使表单有效，并在单击“提交”按钮时触发验证。

如果您想使用现成的解决方案，可以考虑使用流畅的插件;

https://plugins.jquery.com/validation/

https://jqueryvalidation.org/

＆＃13;

(function(window) {
  var btn = document.querySelector('input[type="submit"]'),
    message = document.getElementById('message'),
    inputs = document.querySelectorAll('input:not([type="submit"])'),
    checkForm = function() {
      var isValid = Array.from(inputs).every(function(input) {
        return input.value !== '';
      })
      if (isValid) {
        message.innerHTML = 'form valid';
      } else {
        message.innerHTML = 'warning message';
      }
    };

  btn.addEventListener('click', function(event) {
    checkForm();
  });
})(window);

＆＃13;

<form action="somepage">
  <p>Account Number</p>
  <input type="text" size="3">
  <input type="text" size="3">
  <input type="text" size="4">
  <span>OR</span>
  <p>Email ID</p>
  <input type="email" name="" id="">
  <input type="submit" value="Submit">
</form>
<div id="message"></div>

＆＃13;

Answer 2

您可以根据文档为所有具有required功能的元素制作true选项callback。如果required:true字段为空，则可以为帐号设置emailId，否则如果所有emailId字段为空，则可以要求account number。以下是如何做到这一点。

$("#myform").validate({
  rules: {
    accountNumberOne: {
      required: function(element) {
        return $('#emailId').val() == ""; //true only if emailId is empty
      }
    },
    accountNumberTwo: {
      required: function(element) {
        return $('#emailId').val() == ""; //true only if emailId is empty
      }
    },
    accountNumberThree: {
      required: function(element) {
        return $('#emailId').val() == ""; //true only if emailId is empty
      }
    },
    emailId: {
      required: function(element) {
        return $('#accountNumberOne').val() == "" && $('#accountNumberTwo').val() == "" &&$('#accountNumberThree').val() == "" ;
       //true only if all the other 3 fields are empty
      }
    },
  },
  invalidHandler: function(event, validator) {
    // 'this' refers to the form
    var errors = validator.numberOfInvalids();
    if (errors) {
      var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You missed ' + errors + ' fields. They have been highlighted';
      $("div.error span").html(message);
      $("div.error").show();
    } else {
      $("div.error").hide();
    }
  }
});

<强>

的 Here is the DEMO

<强> Relevant Source

<强>更新

利用errorPlacement选项将其放在一个地方。

<强>

的 Here is the updated DEMO

使用具有相关和独占表单元素的jQuery验证器进行表单验证

2 个答案:

的 Here is the DEMO

的 Here is the updated DEMO