Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Validate - at least one from a group of checkboxes is checked only if a radio button is checked

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;
        }        

    });
});
like image 633
ViaDev Avatar asked Oct 31 '13 18:10

ViaDev


People also ask

How do you check atleast one checkbox is checked or not in jQuery?

prop() and is() method are the two way by which we can check whether a checkbox is checked in jQuery or not.

How to check if radio box is checked jQuery?

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 require at least one checkbox be checked before a form can be submitted?

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.


1 Answers

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/

like image 90
Sparky Avatar answered Nov 10 '22 15:11

Sparky