Подтвердите переключатели «да / нет» на определенные правильные значения с помощью плагина 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'}
    }
});

Метод только предупреждает «значение» как значения «Да», когда correctAnswerRadio: «Нет».Что я могу делать не так?

Answer 1

Я знаю, что это старый пост, но Google по-прежнему привлекает сюда людей.

Я нашел простой способ решить эту проблему. Это не в документации валидатора 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

Мне удалось решить эту проблему беспорядочно, создав метод для каждой кнопки-переключателя. Если у кого-то есть более эффективный способ, дайте мне знать:)

 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

Вы можете просто определить второй метод проверки, correctAnswerRadioNo, который будет проверять, что радиогруппа имеет выбранное значение «Нет», и использовать его, когда «обязательный» ответ - нет.