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

该方法仅在correctAnswerRadio：'No'时将'value'警告为“Yes”值。我能做错什么？

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

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

Answer 4

我已经设法通过为每个单选按钮创建方法来以杂乱的方式解决这个问题。如果某人有更好的效率，请告诉我：）

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

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

Answer 5

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

像这样：

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

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

5 个答案: