Блог

Я использую эти пользовательские флажки CSS в форме, но заметил, что после отправки формы (которая затем запускает jQuery validate) пользовательский флажок больше не отображается. Поведение флажка по-прежнему «работает», просто флажок больше не оформлен пользовательским способом.

Я собрал скрипку, показывающую это: https://jsfiddle.net/gamehendgeVA/z31q59hc/8 /

Кроме того, я включу сюда код.

Вы можете видеть, что по умолчанию флажок отлично работает, когда установлен и снят. В тот момент, когда вы отправляете форму, флажок больше не имеет стиля (но он все еще «работает», просто больше не синий фон с флажком в пользовательском стиле).

Любой совет о том, как лучше всего «исправить» это, был бы потрясающим.

Спасибо!

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."
            }
        }
    });
  

 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>'); // <- ???
},
  

Я не думаю, что вам следует динамически «оборачивать» что-либо в span элемент на основе прохождения / сбоя проверки. Это не имеет смысла. Все, что должно происходить с highlight и unhighlight , — это добавление / удаление классов.

Вызывая .wrap('<span.../>') , вы изменяете структуру DOM, тем самым нарушая любой код обхода 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 /