I´m using jquery validate plugin to ensure at least one from a group of three checkboxes is checked and it´s woking fine. But I want validate these checkboxes only if the radio button "Sim" is checked. I don´t know how to do this.
Demo: http://jsfiddle.net/TnmGr
Html Form:
<form name="itemForm" id="itemForm" method="post">
<p>
<input name="resp01" type="radio" value="sim" id="resp01-sim" class="resp" /> <label for="resp01-sim">Sim</label>
<input name="resp01" type="radio" value="não" id="resp01-nao" class="resp" /> <label for="resp01-nao">Não</label>
</p>
<fieldset style="width:200px"><legend>Outros catalogos</legend>
<input id="opt01" name="opt01" type="checkbox" value="true" class="require-one" />
<label for="opt01">opt01</label>
<input name="opt01" type="hidden" value="false" /><br />
<input id="opt02" name="opt02" type="checkbox" value="true" class="require-one" />
<label for="opt02">opt02</label>
<input name="river2" type="hidden" value="false" /><br />
<input id="opt03" name="opt03" type="checkbox" value="true" class="require-one" />
<label for="opt03">opt03</label>
<input name="opt03" type="hidden" value="false" /><br />
</fieldset>
<div class="error" id="form_error"></div>
<br />
<input type="submit" />
JS:
$.validator.addMethod('require-one', function(value) {
return $('.require-one:checked').size() > 0;
}, 'Selecione pelo menos uma das opções.');
$(document).ready(function(){
var checkboxes = $('.require-one');
var checkbox_names = $.map(checkboxes, function(e, i) {
return $(e).attr("name")
}).join(" ");
$("#itemForm").validate({
groups: {
checks: checkbox_names
},
rules: {
resp01: 'required',
},
messages: {
resp01: { required: 'Selecione uma resposta!' },
},
errorPlacement: function(error, element) {
$('#form_error').append(error);
},
submitHandler: function(form) {
alert('Form Submited');
return false;
}
});
});
prop() and is() method are the two way by which we can check whether a checkbox is checked in jQuery or not.
Your answer We can check the status of a radio button by using the :checked jQuery selector together with the jQuery function is . For example: $('#el').is(':checked') . It is exactly the same method we use to check when a checkbox is checked using jQuery.
How can I enforce that requirement? You could use PHP to check if at least 1 of the check boxes is checked. You would probably also want to make sure your <input "name"> is different for each check box otherwise getting the return variable values might be tricky.
You simply need to alter the logic of your custom method.
$.validator.addMethod('require-one', function(value) {
if ($('#resp01-sim').is(':checked')) {
return $('.require-one:checked').size() > 0;
} else {
return true;
}
}, 'Selecione pelo menos uma das opções.');
DEMO: http://jsfiddle.net/TnmGr/4/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With