使用 jQuery Validator 插件将“是/否”单选按钮验证为特定的正确值

Question

并尽我所能了解 jQuery 验证器插件。

我已经广泛搜索，但找不到与我想要实现的目标相似的任何东西。 请有人帮忙。

我正在尝试使用单选按钮构建问卷表单，并使用 jQuery 验证器插件对其进行验证。

我将如何设置特定于某些答案的验证规则是或否值：

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

我尝试了以下方法，但似乎都不起作用：

$('#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'}

}

最诚挚的问候，并在此先感谢您的帮助

我尝试添加一种新方法，但不知何故它似乎不起作用。

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

我将其更改为：

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

该方法仅在正确AnswerRadio：'否'时将'值'警报为“是”值。 我可能做错了什么？

Answer 1

我知道这是一个旧帖子，但谷歌仍然把人们带到这里。

我找到了一种简单的方法来解决它。 它不在 jquery 验证器的文档中，但已解决。

首先，您必须选择一个收音机。 这可能是“不”。 该值可以是任何值，但我使用的是“True”或“False”

其次在 javascript 上执行此操作（假设您的字段名称是术语）

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

我在 jsfiddle 做了一个例子：http: //jsfiddle.net/ThcS8/117/

Answer 2

嘿，我有同样的问题，这是我用来使它工作的方法：

$.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

我遇到了同样的问题，我通过向我想要选择的特定单选按钮添加一个“正确”类来解决它，然后添加一个检查是否选中的方法，并将该方法绑定到该类。

像这样：

<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

我不得不为每个单选按钮创建一个方法，以一种混乱的方式解决了这个问题。 如果有人有更好更有效的方法，请告诉我:)

 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");

和

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

它似乎运作良好，但我现在唯一的问题是，如果选择了不正确的值，第一次单击时的第一个单选按钮不会显示错误。 稍微切换单选按钮选择后，会出现正确的错误。 这可能是一个错误吗？

使用 jQuery Validator 插件将“是/否”单选按钮验证为特定的正确值

问题描述

5 个解决方案

解决方案1
5 2013-10-30 21:17:34

解决方案2
1 2011-10-12 19:31:46

解决方案3
0 2012-05-29 20:37:55

解决方案4
0 2011-08-11 12:31:52

解决方案5
0 2011-08-12 10:26:06

使用 jQuery Validator 插件将“是/否”单选按钮验证为特定的正确值

问题描述

5 个解决方案

解决方案1 5 2013-10-30 21:17:34

解决方案2 1 2011-10-12 19:31:46

解决方案3 0 2012-05-29 20:37:55

解决方案4 0 2011-08-11 12:31:52

解决方案5 0 2011-08-12 10:26:06

解决方案1
5 2013-10-30 21:17:34

解决方案2
1 2011-10-12 19:31:46

解决方案3
0 2012-05-29 20:37:55

解决方案4
0 2011-08-11 12:31:52

解决方案5
0 2011-08-12 10:26:06