CODEWITHSUNDEEP
jqueryjquery-validate
davewhirlwind
davewhirlwind

Reputation: 207

Using JQuery Validate to see if atleast one set of radiobuttons is checked yes

Have a simple form. That I need to validate that atleast one of the contacts Has Local radio button checked Yes. How do I do that with JQ Validate??

Here is the fiddle

http://jsfiddle.net/davetoolin/dGsQR/1/

Here is the html

<form id="contact" method="post" action="#">
<fieldset>Contact 1
    <input class="name" id="name1" type="text" name="name1" size="20" maxlength=30>
    <br>Local:
    <input class="local" id="local1" type="radio" name="local1" Value="Y">Yes
    <input class="local" id="local1" type="radio" name="local1" Value="N">No
    <p>Contact 2
        <input class="name" id="name2" type="text" name="name2" size="20" maxlength=30>
        <br>Local
        <input class="local" id="local2" type="radio" name="local2 " Value="Y ">Yes
        <input class="local" id="local2" type="radio" name="local2 " Value="N ">No
        <p>Contact 3
            <input class="name" id="name3" type="text" name="name3" size="20" maxlength=30>
            <br>Local
            <input class="local" id="local3" type="radio" name="local3 " Value="Y ">Yes
            <input class="local" id="local3" type="radio" name="local3 " Value="N ">No
            <P>
                <input type="submit" />
</fieldset>

And the JS 

   $('#submit').click(function() {
$('#mailer').submit();
return false;
 });
 $(document).ready(function () {

 $("#contact").validate({
     rules: {
         name1: {
             required: true
         },
         local1: {
             required: function(element) {
          return $('.local:checked').val() == "Y";
        }
         messages: {
             name1: {
                 required: "Name Required"
             },
         local1: {
            required: "At least one contact must be local"
        }
         }
     });
 });

Upvotes: 0

Views: 188

Answers (3)

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33880

Here a little trick, i dont know if it's optimal but it work.

I made an input type='text' invisible for the eye but not display: none;

I added a name and created a custom validation : 

jQuery.validator.addMethod('checkLocal', function(value, element){
    var formValid = false
    $('.local:checked').each(function(){
        if($(this).val() == "Y")formValid = true;
    })
    return formValid;
}, 'Please check something')

Added in the HTML the input where i wanted the error to show up and create a rule on this input : 

'checkError':{'checkLocal' : true}

Then, the validation work!

Joining a fiddle as proof : http://jsfiddle.net/dGsQR/3/

Upvotes: 1

Evan
Evan

Reputation: 67

Well, only one element on a page can have the same ID. You could try something like this

if (($("input[name='local1']:checked").length > 0) | ($("input[name='local2']:checked").length > 0) | ($("input[name='local1']:checked").length > 0)){
  // one ore more checkboxes are checked
}
else{
 // no checkboxes are checked
}

Upvotes: 1

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33880

I think that's what you're looking for :

if($('.local:checked').val() == "Y"){
    //Form is valid
}

Upvotes: 0

Related Questions