Validate "yes/no" radio buttons to specific correct values using jQuery Validator plugin

Question

and trying my best to get my head around the jQuery validator plugin.

I have googled extensively, but could not find anything similar to what i am trying to achieve. Please could someone help.

I am trying to build a questionnaire form using radio buttons, and validate them using the jQuery validator plugin.

How would I go about setting the validation rules specific to certain answers being either yes or no values:

<p>Are you a member of our group? <br />
 <input type="radio" name="member" value="Yes" class="required" id="memberYes" /> 
 <label for="memberYes">Yes</label> <<<<----User must be a member and select 'Yes'
 <input type="radio" name="member" value="No" id="memberNo" />
 <label for="memberdNo">No</label>
</p>

<p>Are you currently under investigation? <br />
 <input type="radio" name="investigation" value="Yes" class="required" id="investigationYes" /> 
 <label for="investigationYes">Yes</label>
 <input type="radio" name="investigation" value="No" id="investigationNo" />
 <label for="investigationNo">No</label> <<<<----User must select 'No' or a message pops up to send them to the correct form
</p>

<p>Has your cat turned green? <br />
 <input type="radio" name="greenCat" value="Yes" class="required" id="greenCatYes" />   <label for="greenCatYes">Yes</label> <<<<---- User must select 'Yes' This is only for users who's cat's are green
 <input type="radio" name="greenCat" value="No" id="greenCatNo" />
 <label for="greenCatNo">No</label>
</p>

<p>Are you currently on the diet? <br />
 <input type="radio" name="diet" value="Yes" class="required" id="dietYes" /> 
 <label for="dietYes">Yes</label> <<<<----User must select the 'Yes' option.
 <input type="radio" name="diet" value="No" id="dietNo" />
 <label for="dietNo">No</label>
</p>

I have tried the following methods but none not seem to work:

$('#Form').validate({
rules: {
    member:{required: function() {
        $('input[name="member"]:checked').val() === 'Yes';
    }
},
investigation:{required: function() {
    return $('#investigationNo').is(':checked');
    }
},
greenCat:{required:true},
diet:{required:'#dietYes:checked'}

}

Kindest Regards, and Thanks in advance for your assistance

I have tried adding a new method, but somehow it does not seem to work.

jQuery.validator.addMethod('correctAnswerRadio', function(value, element) {
    var selectedVal = $('input[name='+element+']:checked').val();
    alert(element.name + selectedVal + value);
    if(selectedVal === value){ //Correct Value
        return true;
    }else{ 
        return false;
    }
});`

i changed this to:

$('#Form').validate({
    rules: {
        member:{required:true,correctAnswerRadio:'Yes'},
        investigation:{required:true,correctAnswerRadio:'No'},
        greenCat:{required:true,correctAnswerRadio:'Yes'},
        diet:{required:true,correctAnswerRadio:'Yes'}
    }
});

The method only alerts 'value' as "Yes" values when correctAnswerRadio:'No'. What could i be doing wrong?

Answer 1

I know it is an old post but google still brings people here.

I've found a simple way to solve it. It's not at the jquery validator's documentation but solved.

First of all you must select one radio. It could be the "No". The value can be any, but I've worked with "True" or "False"

Secondly do this at javascript (assuming your field name is terms)

$('form').validate({
  rules:{
    terms: {min:"True"}
  },
  messages:{
    terms: {min:'you must accept terms to move on.'}
  }
});

I've made an example at jsfiddle: http://jsfiddle.net/ThcS8/117/