lundi 18 mars 2019

jQuery validate with custom checkbox CSS not working after form validation

I am using these custom CSS checkboxes on a form, but noticed after I submit the form (which then runs jQuery validate), the custom checkbox does not show anymore. The checkbox behavior still "works", it's just the checkbox is no longer styled in the custom way.

I've put together a fiddle showing this: https://jsfiddle.net/gamehendgeVA/z31q59hc/8/

Also, I'll include the code here.

You can see that at default, the checkbox works great, when checked and unchecked. The moment that you submit the form, then the checkbox no longer is styled (but, it still "works", just not blue background with the custom styled checkmark anymore).

Any advice on how best to "fix" this would be awesome.

thanks!

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




Aucun commentaire:

Enregistrer un commentaire