表单验证使用jQuery验证器具有相关的和排他的表单元素

Form Validation with jQuery validator having related and exclusive form elements

本文关键字：表单 验证 元素 jQuery      更新时间：2023-09-26

我有下面的结构在我的项目的形式，

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

如果用户填写了 Account Number或Email ID的所有3个方框，则该表单将有效。如果她提交空白，它将显示两个字段的单个错误消息。我知道这可以使用require_from_group和组 jQuery验证器的属性来完成，但我不能一起实现它们!

任何帮助将不胜感激!

您可以使用下面的简单示例。如果其中一个字段为空值，它将显示一条警告消息。所有输入必须与一些数据完全匹配，以便使表单有效，并且在单击Submit按钮时触发验证。

如果你想使用一个现成的解决方案，你可以考虑流动的插件;

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

https://jqueryvalidation.org/

(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);
<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>

您可以将required选项true用于所有具有callback功能的元素，如docs所示。如果emailId字段为空，您可以将required:true设置为帐号，如果所有account number字段为空，您可以将emailId设置为必需。你可以这样做:

$("#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();
    }
  }
});

这是DEMO

<<p> 相关来源/strong>

使用errorPlacement选项把它放在一个地方

这是更新演示

相关文章：