Проверка JQuery с пользовательским флажком CSS не работает после проверки формы - PullRequest
Новая
       18

Проверка JQuery с пользовательским флажком CSS не работает после проверки формы

0 голосов
/ 18 марта 2019

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

Я собрал скрипку, показывающую это: 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."
            }
        }
    });

1 Ответ

1 голос
/ 18 марта 2019 
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');
},

DEMO: jsfiddle.net / wdecm1u5 /

...