jQuery Validate插件 - 某些字段上禁用错误消息

Question

我希望仅针对表单上的特定输入字段禁用错误消息。

在此示例中，我试图仅用于无线电输入字段的Messege。

jQuery(document).ready(function($) {
  "use strict";
  $("form").validate();
  $('input[type="radio"]').validate({
    errorPlacement: function(error, element) {
      return false;
    }
  });
  
  $(document.body).on('click', '.submiter', function () {
		$("input").valid();
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<form>
  <fieldset>
    <p>
      <label for="title-Mr">Mr</label>
      <input id="title-Mr" type="radio" name="title" value="MR" class="required">
    </p>
    <p>
      <label for="bading">Bading</label>
      <input id="bading" type="text" name="bading" class="required">
    </p>
  </fieldset>
  <p>
    <a class="submiter" href="#submit">submit</a>
  </p>
</form>

Answer 1

我通过在错误置换函数中添加if语句来弄清楚它。

jQuery(document).ready(function($) {
  "use strict";
  $("form").validate({
    errorPlacement: function(error, element) {
      if (element.is(":radio")) {
        return false;
      } else {
        error.insertAfter(element);
      }
    }
  });
  $(document.body).on('click', '.submiter', function() {
    $("input").valid();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<form>
  <fieldset>
    <p>
      <label for="title-Mr">Mr</label>
      <input id="title-Mr" type="radio" name="title" value="MR" class="required">
    </p>
    <p>
      <label for="bading">Bading</label>
      <input id="bading" type="text" name="bading" class="required">
    </p>
  </fieldset>
  <p>
    <a class="submiter" href="#submit">submit</a>
  </p>
</form>

Answer 2

在https://jqueryvalidation.org/validate上检查文档。只需一个类，可以识别您不想验证的字段，并在表单中使用"忽略"选项。Validate呼叫：

jQuery(document).ready(function($) {
  "use strict";
  $("form").validate({ignore: ".ignore"});
 
  $(document.body).on('click', '.submiter', function () {
		$("input").valid();
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<form>
  <fieldset>
    <p>
      <label for="title-Mr">Mr</label>
      <input id="title-Mr" type="radio" name="title" value="MR" class="required ignore">
    </p>
    <p>
      <label for="bading">Bading</label>
      <input id="bading" type="text" name="bading" class="required">
    </p>
  </fieldset>
  <p>
    <a class="submiter" href="#submit">submit</a>
  </p>
</form>

Answer 3

这是一个解决方案

<script>
    jQuery(document).ready(function($) {
  "use strict";
  $('form').validate({
    errorPlacement: function(error, element) {
      if(element.attr('id') == 'title-Mr'){
        return false;
      }
    }
  });
  $(document.body).on('click', '.submiter', function () {
        $("input").valid();
    });
});
</script>

Answer 4

在这种情况下您的最佳选择是：

1. 如果不需要单选按钮，请从无线电输入中删除class="required"属性。

2. 通过指定$().validate()函数内部的ignore: <selector>完全忽略该元素的验证。

   $('input[type="radio"]').validate({
       ignore: "title-Mr"
   });
   

3. 如果您仍然需要需要单个按钮，但不显示消息，请为该特定标识符指定一个空消息。

   $('input[type="radio"]').validate({
       messages: {
           "title-Mr": null
       }
   });
   

根据https://jqueryvalidation.org/，首页上的视频解释了一些不同的情况，每个场景变得越来越复杂。演示如何指定基本自定义的方案说明，有两个主要部分要传递给$().validate()函数："规则"one_answers"消息"。在"消息"中，子键是您要自定义的表单字段消息的ID。还有其他可用的选项，例如"忽略"。

希望这会有所帮助。