CODEWITHSUNDEEP
jquerycsstwitter-bootstrapcheckboxjquery-validate
gamehendgeVA
gamehendgeVA

Reputation: 147

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

Upvotes: 0

Views: 952

Answers (1)

Sparky
Sparky

Reputation: 98738

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

I don't think you should be dynamically "wrapping" anything in a span element based on validation pass/fail. It doesn't make sense. All that should be happening with highlight and unhighlight is adding/removing classes.

By invoking .wrap('<span.../>') you are altering the structure of the DOM, thereby breaking any jQuery DOM traversal code that affects where/how the checkbox is constructed.

The if/then/else conditional logic doesn't even make a lot of sense here because both functions are testing for existence of the same classes.

By removing the conditional logic, thereby removing the .wrap(), your problem goes away.

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/

Upvotes: 1

Related Questions