JSFiddle - React, Tailwind, and code Playground

by m4xout

HTML

<link rel="stylesheet" href="http://88ab3e84099be7e78755-9809173ac7d72ed2228bcf805441be5c.r76.cf2.rackcdn.com/32673/css/bootstrap.min.css">
<link rel="stylesheet" href="http://staging.serviceportal.com.au/service05/J33087/css/prettyCheckable.css">
<link rel="stylesheet" href="http://staging.serviceportal.com.au/service05/J33087/css/custom.css">
<script src="http://88ab3e84099be7e78755-9809173ac7d72ed2228bcf805441be5c.r76.cf2.rackcdn.com/J33087/js/bootstrap.min.js"></script>
<script src="http://88ab3e84099be7e78755-9809173ac7d72ed2228bcf805441be5c.r76.cf2.rackcdn.com/J33087/js/jQuery.textareaCounter.js"></script>
<script src="http://staging.serviceportal.com.au/service05/J33087/js/prettyCheckable.js"></script>
<script src="http://88ab3e84099be7e78755-9809173ac7d72ed2228bcf805441be5c.r76.cf2.rackcdn.com/J33087/js/jquery.validate.min.js"></script>
<script src="http://88ab3e84099be7e78755-9809173ac7d72ed2228bcf805441be5c.r76.cf2.rackcdn.com/J33087/js/additional-methods.min.js"></script>
         <form name="submitDetails" id="submitDetails" action="dm33087_dan_murphy_nov.do" method="post">
              <input type="hidden" name="checkEmailDatabaseStatus" id="checkEmailDatabaseStatus" value="2">
              <div class="form-group form-groupA">
                <div class="col-xs-4">
                  <label for="firstName" class="field1">First Name</label>
                </div>
                <div class="col-xs-8">
                  <input type="text" id="firstName" name="firstName" maxlength="80" value="">
                </div>
                <div class="clearfix"></div>
                <div class="col-xs-4">
                  <label for="lastName" class="field1">Last Name</label>
                </div>
                <div class="col-xs-8">
                  <input type="text" id="lastName" name="lastName" maxlength="80" value="" >
                </div>
                <div class="clearfix"></div>
                <div class="col-xs-4">
                 ...

CSS

.error, .errorGroup {
	color: #ef4238 !important;
	display: block;
	font-weight: normal;
	line-height: normal;
	margin-bottom: 10px;
}
#error_msg, #error_msg2 {
	margin-left: 45px
}
.errorTextnew {
	margin: 15px;
	width: 80%;
	color: #ef4238;
	display: block;
	font-weight: normal;
	line-height: normal;
}

JavaScript

$(document).ready(function(){
    $("form").submit(function(){
 if ($('input:checkbox').filter(':checked').length < 1){
        alert("Please Check at least one Check Box");
 return false;
 }
    });
});