jQuery 验证器验证错误 - 需要两个字段之一

Question

我有一个表格，我想在其中要求访问者的 phone 号码或电子邮件地址。我想要求这个，而表格是一个信息请求表格，我想确保我至少有一个反馈渠道 - 让用户选择使用哪个 （或者两者都可能）.

有一段时间我一直被这里吸引，在其他非常相似的问题中找不到合适的信息——不知怎么的，它们都不合适。因此请原谅我重复的问题；我只是看不到我在哪里出错。这是我几乎完整的表格（只去掉了我认为好的和对问题来说不必要的部分）:

  <div class="propertydetailrequest form-group">
    <input type="text" name="cntnt01fbrp__31" value="" class="form-control" required="" placeholder="Your Name *" id="fbrp__31" />
  </div>
  <div>
    <input type="email" name="cntnt01fbrp__58[]" value="" class="form-control require-one" placeholder="Your Email" id="fbrp__58_1" />
  </div>
  <div>
    <input type="text" name="cntnt01fbrp__33" value="" class="form-control require-one" placeholder="Your Telephone" id="fbrp__33" />
  </div>
  <div class="required">
    <input type="checkbox" class="form-control" name="cntnt01fbrp__56" value="t" required="required" id="fbrp__56" />
    <label for="fbrp__56">I read and have accepted the <a href="gdpr.html">privacy policy</a> <span class="red">*</span></label>
  </div>
  <div>
    <script>
// adding script here within the form instead of in a global script file
// using vanilla JS to enable jQuery after it has been loaded before </body>
  document.addEventListener('DOMContentLoaded', function () {
  $("#cntnt01fbrp_submit").addClass('disabled');
  $("#cntnt01fbrp_submit").prop('disabled', true);

  $.getScript("http://example.com/assets/js/validate.min.js", function () {
    $( "#cntnt01moduleform_1" ).validate({
      errorPlacement: function(error,element) {
        return true; // just hiding that error message
      },
      rules: {
        fbrp__58_1: {
          require_from_group: [1, ".require-one"],
          email: true // does validate email addresses and empty is fine too
        },
        fbrp__33: {
          require_from_group: [1, ".require-one"]
        }
      }
    }); // eof validate
  });  //eof getscript

// trying to make sending the form without validation impossible
  $('#cntnt01moduleform_1 input').on('keyup blur', function () {
    if ($('#cntnt01moduleform_1').valid()) {
      console.log('validated onBlur'); // make sure the plugin validates and not the browser
      $('input#cntnt01fbrp_submit').removeClass('disabled'); $("#cntnt01fbrp_submit").prop('disabled', false);
    } else {
      $('input#cntnt01fbrp_submit').addClass('disabled'); $("#cntnt01fbrp_submit").prop('disabled', true);
    }
  });
  $('#fbrp__56').change(function() {
    if ($('#cntnt01moduleform_1').valid()) {
      console.log('validated onClick'); // make sure the plugin validates and not the browser
      $('input#cntnt01fbrp_submit').removeClass('disabled'); $("#cntnt01fbrp_submit").prop('disabled', false);
    } else {
      $('input#cntnt01fbrp_submit').addClass('disabled'); $("#cntnt01fbrp_submit").prop('disabled', true);
    }
  });

});  // eof dom load
</script> 
  </div>
  <div class="submit text-right">
    <input class="btn btn-success" name="cntnt01fbrp_submit" id="cntnt01fbrp_submit" value="Senden" type="submit"  />
  </div>
</form>

但是，仅提供名称 （HTML 属性要求） 并选中 上的 GDPR 复选框（这也是HTML) 需要。显然，验证器插件确实验证了表单——尽管我在选项中要求它使其中一个成为必需的。稍后将删除控制台日志 - 我只是想弄清楚在使用此功能时会触发哪个事件。

Answer 1

您需要包含所有必需的 jquery 插件。因此，您还必须包括 additional methods library

另外，据我所知，规则名称应该引用输入的名称（而不是 id），因此不要使用 fbrp__58_1 和 fbrp__33，而是 cntnt01fbrp__58和cntnt01fbrp__33，分别是

因此：

   <form id="cntnt01moduleform_1">
        <div class="propertydetailrequest form-group">
            <input type="text" name="cntnt01fbrp__31" value="" class="form-control" required="" placeholder="Your Name *" id="fbrp__31" />
        </div>
        <div>
            <input type="email" name="cntnt01fbrp__58" value="" class="form-control require-one" placeholder="Your Email" id="fbrp__58_1" />
        </div>
        <div>
          <input type="text" name="cntnt01fbrp__33" value="" class="form-control require-one" placeholder="Your Telephone" id="fbrp__33" />
        </div>com
        <div class="required">
          <input type="checkbox" class="form-control" name="cntnt01fbrp__56" value="t" required="required" id="fbrp__56" />
          <label for="fbrp__56">I read and have accepted the <a href="gdpr.html">privacy policy</a> <span class="red">*</span></label>
        </div>

        <div>
        <script>
            // adding script here within the form instead of in a global script file
            // using vanilla JS to enable jQuery after it has been loaded before </body>
        document.addEventListener('DOMContentLoaded', function () {

          $("#cntnt01fbrp_submit").addClass('disabled');
          $("#cntnt01fbrp_submit").prop('disabled', true);


            $( "#cntnt01moduleform_1" ).validate({
              errorPlacement: function(error,element) {
                return true; // just hiding that error message
              },
              rules: {
                cntnt01fbrp__58: {
                  require_from_group: [1, ".require-one"],
                  minlength: 2 //I just added this. You can remove it if you want to
                  //email: true // does validate email addresses and empty is fine too
                },
                cntnt01fbrp__33: {
                  require_from_group: [1, ".require-one"],
                  minlength: 2 //I just added this. You can remove it if you want tp
                }
              } 
            }); // eof validate



        // trying to make sending the form without validation impossible
          $('#cntnt01moduleform_1 input').on('keyup blur', function () {

            if ($('#cntnt01moduleform_1').valid()) {

              console.log('validated onBlur'); // make sure the plugin validates and not the browser
              $('input#cntnt01fbrp_submit').removeClass('disabled'); $("#cntnt01fbrp_submit").prop('disabled', false);
            } else {
                console.log('validation failed')
              $('input#cntnt01fbrp_submit').addClass('disabled'); $("#cntnt01fbrp_submit").prop('disabled', true);
            }
          });
          $('#fbrp__56').change(function() {
            if ($('#cntnt01moduleform_1').valid()) {
              console.log('validated onClick'); // make sure the plugin validates and not the browser
              $('input#cntnt01fbrp_submit').removeClass('disabled'); $("#cntnt01fbrp_submit").prop('disabled', false);
            } else {
              $('input#cntnt01fbrp_submit').addClass('disabled'); $("#cntnt01fbrp_submit").prop('disabled', true);
            }
          });

        });  // eof dom load
    </script> 
  </div>
  <div class="submit text-right">
    <input class="btn btn-success" name="cntnt01fbrp_submit" id="cntnt01fbrp_submit" value="Senden" type="submit"  />
  </div>
</form>

在 </body>

之前将其添加到您的文件中

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.js" integrity="sha256-xLhce0FUawd11QSwrvXSwST0oHhOolNoH9cUXAcsIAg=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js" integrity="sha256-vb+6VObiUIaoRuSusdLRWtXs/ewuz62LgVXg2f1ZXGo=" crossorigin="anonymous"></script>

jQuery 验证器验证错误 - 需要两个字段之一

jQuery validator validates falsely - one of two fields required

html

jquery

jquery-validate