JSFiddle - React, Tailwind, and code Playground

by gamehendgeVA

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="bootstrap"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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);
}

JavaScript

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."
                }
            },
            submitHandler: function(form) {
            	alert('validation passed');
            	return false;
            }
        });