JQuery 验证器自定义错误放置不起作用

Question

在@TrueBlueAussie 的大力帮助下，我使用自定义图像创建了一个复选框。我现在被困在下一步，即在自定义复选框之后放置验证错误消息。

如果我取消隐藏复选框，我可以看到它正在被选中/未选中。我也得到验证错误按预期出现。虽然这可行，但通过图像按钮取消选中复选框并不会删除错误消息。

此外，当我将display:none 添加回复选框时，根本不会显示错误消息。我的代码有什么问题？

我创建了一个FIDDLE here 来显示问题。请从复选框中删除 display:none 以查看症状。

HTML：

<input type="checkbox" id="AcceptTerms_check" name="AcceptTerms_check" style="display:none;"> 
<img class="chk-img" id="AcceptTerms" src="../../../wp-content/uploads/misc/notselected.png">
<span id="ts-cs-accept">I have read and accept the Terms and Conditions.</span>

jQuery 验证器代码：

 jQuery("#InstallerForm").validate({
     rules: {
         InstBizNam: {
             required: true
         },
         AcceptTerms_check: {
             required: true
         }
     },
     messages: {
         InstBizNam: "Please enter business name",
         AcceptTerms_check: "Please read and accept the program terms to submit your application"
     },
     errorPlacement: function (error, element) {
         if (element.attr("name") == "AcceptTerms_check") {
             error.insertAfter("#ts-cs-accept");
         } else {
             error.insertAfter(element);
         }
     },
     submitHandler: function (form) {
         alert("SUBMITTED!");
     }
 });

Answer 1

这是因为默认情况下隐藏元素被排除在验证之外。您可以将自定义选择器传递给 ignore 选项以覆盖默认设置。

jQuery(document).ready(function() {
  jQuery("#InstallerForm").submit(function(event) {
    event.preventDefault();
    return false;
  });

  jQuery('.chk-img').click(function(e) {
    var element = jQuery(this);
    var $checkbox = jQuery('input:checkbox[name=' + this.id + '_check]');
    if ($checkbox.prop("checked")) {
      $checkbox.prop('checked', false);
      jQuery(element).attr("src", "//placehold.it/24/ff0000");
    } else {
      $checkbox.prop('checked', true);
      jQuery(element).attr("src", "//placehold.it/24/00ff00");
    }
    $checkbox.valid()
  });

  jQuery("#InstallerForm").validate({
    ignore: ':hidden:not(#AcceptTerms_check)',
    rules: {
      InstBizNam: {
        required: true
      },
      AcceptTerms_check: {
        required: true
      }
    },
    messages: {
      InstBizNam: "Please enter business name",
      AcceptTerms_check: "<br/>Please read and accept the program terms to submit your application"
    },
    errorPlacement: function(error, element) {
      if (element.attr("name") == "AcceptTerms_check") {
        error.insertAfter("#ts-cs-accept");
      } else {
        error.insertAfter(element);
      }
    },
    submitHandler: function(form) {
      alert("SUBMITTED!");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js"></script>
<form id="InstallerForm" name="InstallerForm" action="" method="get">
  <fieldset>
    <label for="InstBizNam">Business Name*:</label>
    <input name="InstBizNam" id="InstBizNam" type="text" class="input-text" tabindex="5" placeholder="Business Name" />
    <br/>
    <br/>
    <input type="checkbox" id="AcceptTerms_check" name="AcceptTerms_check" style="display:none;" />
    <img class="chk-img" id="AcceptTerms" src="//placehold.it/24/ff0000" /> <span id="ts-cs-accept">Accept Terms</span>

    <br/>
    <br/>
    <input name="submit" type="submit" value="Submit Application" />
  </fieldset>
</form>

在上述情况下，我们将忽略除#AcceptTerms_check 之外的所有隐藏元素。