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/

Answer 2

Hey i had the same problem, here is a method i used to make it work:

$.validator.addMethod("hasToBeYes", function(value, element) { 
    var elem_name = $(element).attr('name');
    value = $('input:radio[name="'+elem_name+'"]:checked').val();
    return(value == 'yes');
}, 'You have to answer "Yes" to this question');

Answer 3

I had the same problem and I solved it by adding a class "correct" to the specific radio button I want selected, then add a method that checks whether this is checked, and bind the method to the class.

Like this:

<script>
// add new method:
jQuery.validator.addMethod("correct", function(value,element) { 
    return $(element).is(':checked') ; }, "You must choose this option.");
// bind new method to class "correct":
jQuery.validator.classRuleSettings.correct = { correct:true };
</script>

<html>
<p>Are you a member of our group? <br />
 <input type="radio" name="member" value="Yes" class="correct" 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>Are you currently under investigation? <br />
 <input type="radio" name="investigation" value="Yes"  id="investigationYes" /> 
 <label for="investigationYes">Yes</label>
 <input type="radio" name="investigation" value="No" class="correct" id="investigationNo" />
 <label for="investigationNo">No</label> <<<<----User must select 'No' or a message pops up to send them to the correct form
</p>
</html>

Answer 4

您可以只定义第二种验证方法， correctAnswerRadioNo ，它将检查无线电组是否具有选定的“否”值，并在“必需”答案为否时使用它。

Answer 5

I have managed to solve this in a messy way by having to create a method for every radio button. If someone has a better more efficient way let me know :)

 jQuery.validator.addMethod('member', function(value, element, params) {
      return $("input[name='member']:checked").val() == 'Yes';
 }, "You need to be a member to continue");

 jQuery.validator.addMethod('investigation', function(value, element, params) {
      return $("input[name='investigation']:checked").val() == 'Yes';
 }, "You should not be under investigation to continue");

 jQuery.validator.addMethod('greenCat', function(value, element, params) {
      return $("input[name='greenCat']:checked").val() == 'Yes';
 }, "Your cat must be green to continue");

 jQuery.validator.addMethod('diet', function(value, element, params) {
      return $("input[name='diet']:checked").val() == 'Yes';
 }, "You must be on a diet to continue");

and

 rules: {
    member:{required:true,member:true},
    investigation:{required:true,investigation:true},
    greenCat:{required:true,greenCat:true},
    diet:{required:true,diet:true}
 }

It seems to work well, but the only problem i have now is that the first radio button on first click does not show an error if the incorrect value is selected. after you toggle the radio button selection a bit the correct error appears. could this be a bug?