JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.js"></script>
<form id="form1" name="form1" method="post" action="submit.php">
<fieldset>
1 . Question One
<br/>
<fieldset>
<label for="check[0]">
<input type="checkbox" class="checkbox" id="check[0]" name="0" value="Opt One" required="required" minlength="1">Opt One
</label>
<br />
<label for="check[1]"><input type="checkbox" class="checkbox" id="check[1]" name="0" value="Opt Two">Opt Two
</label>
<br />
<label for="check[2]"><input type="checkbox" class="checkbox" id="check[2]" name="0" value="Opt Three">Opt Three
</label>
<br />
<label for="check[3]"><input type="checkbox" class="checkbox" id="check[3]" name="0" value="Opt Four">Opt Four
</label>
<br />
<label for="0" class="error" style="display:none"> Please select at least one option. </label>
<br/>
</fieldset>
2 . Question Two
<br/>
<fieldset>
<label for="check[4]">
<input type="checkbox" class="checkbox" id="check[4]" name="1" value="aaaa" required="required" minlength="1">aaaa
</label>
<br />
<label for="check[5]"><input type="checkbox" class="checkbox" id="check[5]" name="1" value="bbbb">bbbb
</label>
<br />
<label for="check[6]"><input type="checkbox" class="checkbox" id="check[6]" name="1" value="cccc">cccc
</label>
<br />
<label for="check[7]"><input type="checkbox" class="checkbox" id="check[7]" name="1" value="dddd">dddd
</label>
<br />
<label for="1" class="error" style="display:none"> Please...
CSS
a {
display: block;
position: absolute;
bottom: 0;
}
JavaScript
$(document).ready(function () {
$("#form1").validate({
invalidHandler: function() {
alert('FAILED validation');
},
submitHandler: function() {
alert('PASSED validation');
}
});
});