jQuery 使用自定义复选框进行验证 CSS 表单验证后无效

Question

我在表单上使用这些自定义 CSS 复选框，但在我提交表单后注意到（然后运行 jQuery 验证），自定义复选框不再显示。复选框行为仍然 "works"，只是复选框不再以自定义方式设置样式。

我整理了一个 fiddle 来展示这个：https://jsfiddle.net/gamehendgeVA/z31q59hc/8/

此外，我将在此处包含代码。

您可以看到，默认情况下，复选框在选中和未选中时效果很好。在您提交表单的那一刻，复选框不再设置样式（但是，它仍然 "works"，只是不再是带有自定义样式复选标记的蓝色背景）。

任何关于如何最好地 "fix" 的建议都很棒。

谢谢！

HTML

<form id="addressForm" name="addressForm" method="post">
  <div class="row">
<div class="col-md-12">
  <div class="alertBox infoAlert" style="padding-top:8px;padding-left:4px;">
    <div class="checkbox-inline">
      <label class="checkboxContainer">I have read and agree to the Privacy Policy
        <input type="checkbox" name="privacyPolicyCheckbox" id="privacyPolicyCheckbox" value="no">
        <span class="checkmark"></span>
      </label>
    </div>
  </div><!-- /.alertBox -->
</div>
  </div>
  <div style="margin-top:20px;"><input type="submit" value="Go to Next Screen" class="btn btn-cta-ecommerce fullWidthButton760" id="addressFormSubmit" style="min-width:350px;" /></div>
</form>

CSS

 /* Customize the label (the container) */
.checkboxContainer {
  display: block;
  position: relative;
  padding-left: 35px;
 /* margin-bottom: 12px; */
  cursor: pointer;
  font-size: 18px;/* was 22px */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default checkbox */
.checkboxContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 13px;/* was 0 */
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fff;/* was #eee */
  border: 1px solid #333;/* added */
 }
 /* On mouse-over, add a grey background color */
 .checkboxContainer:hover input ~ .checkmark {
  background-color: #d1d1d1;/* was #ccc */
  }
 /* When the checkbox is checked, add a blue background */
 .checkboxContainer input:checked ~ .checkmark {
  background-color: #2196F3;
 }
 /* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }
/* Show the checkmark when checked */
.checkboxContainer input:checked ~ .checkmark:after {
  display: block;
}
/* Style the checkmark/indicator */
 .checkboxContainer .checkmark:after {
 left: 10px;
  top: 6px;
  width: 6px;
   height: 11px;
   border: solid white;
   border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}

JS

    jQuery.validator.setDefaults({
        errorElement: "span",
        errorClass: "help-block",
        highlight: function(element) {
            jQuery(element).parent().is('.has-success, .has-error') ?
                jQuery(element).parent().removeClass('has-success').addClass('has-error') :
                jQuery(element).wrap('<span class="has-error"></span>');
        },
        unhighlight: function(element) {
            jQuery(element).parent().is('.has-success, .has-error') ?
                jQuery(element).parent().removeClass('has-error').addClass('has-success') :
                jQuery(element).wrap('<span class="has-success"></span>');
        },
        errorPlacement: function(error, element) {
            if (element.attr("name") == "nonMemberType") //not needed on this screen, but keeping placeholder syntax
                error.insertAfter("#selectNonMemberValidationBlock"); //not needed, see above
            else {
                error.insertAfter(element);
            }
        }
    });

    jQuery("#addressForm").validate({
        rules: {
            'privacyPolicyCheckbox': {
                required: true
            },
        },
        messages: {
            'privacyPolicyCheckbox': {
                required: "Please indicate that you agree to the Terms and Conditions by checking this box."
            }
        }
    });

Answer 1

highlight: function(element) {
    jQuery(element).parent().is('.has-success, .has-error') ?
        jQuery(element).parent().removeClass('has-success').addClass('has-error') :
        jQuery(element).wrap('<span class="has-error"></span>'); // <- ???
},
unhighlight: function(element) {
    jQuery(element).parent().is('.has-success, .has-error') ?
        jQuery(element).parent().removeClass('has-error').addClass('has-success') :
        jQuery(element).wrap('<span class="has-success"></span>'); // <- ???
},

我认为您不应根据验证 pass/fail 在 span 元素中动态 "wrapping" 任何内容。这没有意义。 highlight 和 unhighlight 应该发生的所有事情是 adding/removing 类.

通过调用 .wrap('<span.../>')，您正在改变 DOM 的结构，从而破坏影响 where/how 复选框的任何 jQuery DOM 遍历代码建造。

if/then/else 条件逻辑在这里甚至没有多大意义，因为两个函数都在测试是否存在相同的类.

通过删除条件逻辑，从而删除 .wrap()，您的问题就消失了。

highlight: function(element) {
    jQuery(element).parent().removeClass('has-success').addClass('has-error');
},
unhighlight: function(element) {
    jQuery(element).parent().removeClass('has-error').addClass('has-success');
},

演示：jsfiddle.net/wdecm1u5/

jQuery 使用自定义复选框进行验证 CSS 表单验证后无效

jQuery validate with custom checkbox CSS not working after form validation

css

checkbox

jquery

jquery-validate

twitter-bootstrap