Validate at least one checkbox checked
jquery validation
by Sumesh KP
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 method="http://jsfiddle.net/sumeshkp18/x23k4z5b/4/" enctype="multipart/form-data" id="488070d5-ee23-4bb7-9ebd-1da33d677339" method="get" novalidate="novalidate">
<input type="checkbox" name="01ee3772-67dc-4738-9fd7-af167741871a" id="01ee3772-67dc-4738-9fd7-af167741871a" class="mandatory" data-val="true" data-val-requiredcb="Check this field">
<label for="01ee3772-67dc-4738-9fd7-af167741871a" class="fieldLabel">Check</label>
<div class="contourPage">
<h4 class="contourPageName">Page Title</h4>
<legend>Fieldset legend</legend>
<div class="contourField check checkbox mandatory form-group">
<div>
<span class="checkboxlist" id="01ee3772-67dc-4738-9fd7-af167741871acontour">
<input type="checkbox" name="01ee3772-67dc-4738-9fd7-af167741871a" id="01ee3772-67dc-4738-9fd7-af167741871a" class="mandatory" data-val="true" data-val-requiredcb="Check this field">
<label for="01ee3772-67dc-4738-9fd7-af167741871a" class="fieldLabel">Check</label>
</span>
<span class="field-validation-valid" data-valmsg-for="01ee3772-67dc-4738-9fd7-af167741871a" data-valmsg-replace="true"></span></div>
</div>
<div class="contourField checkboxlist checkboxlist mandatory form-group">
<div>
<label for="d37a78cc-543f-465d-9dd9-38a481b4a812" class="fieldLabel">Check box list</label> <span class="radiobuttonlist checkboxlist" id="d37a78cc-543f-465d-9dd9-38a481b4a812">
<input...
CSS
a {
display: block;
position: absolute;
bottom: 0;
}
.error {
color: red;
}
#myform {
margin: 10px;
}
#myform > div {
margin-top: 10px;
}
JavaScript
$(document).ready(function () {
$('#myform').validate({
rules: {
'01ee3772-67dc-4738-9fd7-af167741871a': {
required: true
},
'fav': {
required: true
},
'demo': {
required: true
}
},
errorPlacement: function (error, element) {
//error.insertBefore(element);
error.insertAfter(element.closest('div'));
},
submitHandler: function (form) { // for demo
alert('valid form');
return false;
}
});
});