JQuery проверить плагин радио с необязательным текстом

Question

Я пытаюсь выяснить, как проверить элемент формы с помощью комбинации радиовходов и ввода текста:

<label>Question?</label>
<input type="radio" class="mandatory" name="questions[1][]" value="1" />answer 1<br/>
<input type="radio" class="mandatory" name="questions[1][]" value="2" />answer 2<br/>
<input class="ignore" type="radio" id="questions[1][]" />Other (please specify)<br/>
<input class="optional mandatory" type="text" name="questions[1][]" value="" />

Я выяснил, как заставить форму вести себя так, как ожидается(выберите и отмените выбор) с помощью следующего кода:

$("input.optional").focus(function () {
  var this_name = $(this).attr("name");
  $("input:radio").filter(function() {return $(this).attr('name') == this_name; }).attr('checked', false);
  $("input").filter(function() {return $(this).attr('id') == this_name; }).attr('checked', true);
});
$(':radio').click(function () {
  var this_name = $(this).attr("name");
  $("input").filter(function() {return $(this).attr('id') == this_name; }).attr('checked', false);
  $("input.optional").filter(function() {return $(this).attr('name') == this_name; }).val('');
});

Я надеялся, что смогу использовать класс «обязательный» для проверки комбинации радио и текстового ввода:

$("form .manditory").each(function () {
  $(this).rules("add", {required: true});
});

Ноэто не работает, как ожидалось.С выбранным радио (id = "questions [1] []") и текстовым вводом, содержащим контент, элемент формы по-прежнему помечается как недействительный.

Предложения ... может быть, лучший подход?

Заранее спасибо.

ОБНОВЛЕНИЕ

Извините, я должен был уточнить, что я использую плагин проверки:

$("form").validate({ ... });

Answer 1

Вы можете попробовать это:

http://www.geektantra.com/2009/10/update-for-jquery-live-form-validation-plugin/

Имеется опция подтверждения радио-кнопки

http://www.geektantra.com/projects/jquery-form-validate/advanced_demo/

<label>Question?</label>
<span id="ValidRadio" class="InputGroup"> 
<input type="radio" class="mandatory" name="questions[1][]" value="1" id="choice_1_1" />answer 1<br/>
<input type="radio" class="mandatory" name="questions[1][]" value="2" id="choice_1_2" />answer 2<br/>
<input type="radio" class="ignore" name="questions[1][]" value="3" id="choice_1_3" />Other (please specify)<br/>
</span>
<input class="optional mandatory" type="text" name="questions[1][]" value="" id="text_choice_1_4" />

Инициализация плагина должна быть похожа на приведенную выше разметку.

jQuery("#ValidRadio").validate({
  expression: "if (isChecked('choice_1_1') || isChecked('choice_1_2') || (isChecked('choice_1_2') && jQuery('#text_choice_1_4').val())) return true; else return false;",
  message: "Please choose or enter an answer"
});

Вам потребуется включить jquery.validation.functions.js вместе с jquery.validate.js

Answer 2

Я нашел решение.

По сути, я добавил / удалил правило проверки к текстовому вводу на основе выбранной опции радио, чтобы форму нельзя было отправить, если пользователь выбрал «другой» радиовход. Когда был введен текст, я обновил значение «другого» радиовхода.

Вот код:

<label>Question?</label>
<input type="radio" class="manditory" name="questions[1][]" value="1" />answer1<br/>
<input type="radio" class="manditory" name="questions[1][]" value="2" />answer2<br/>
<input type="radio" class="optional_button manditory" name="questions[1][]" value="" />Other (please specify)<br/>
<input class="optional_input" type="text" id="questions[1][]" value="" />

... и jQuery:

$("form").validate({ 
    errorPlacement: function(error, element) {
        if (element.hasClass('optional_input') == false){
            error.appendTo(element.prev("label"));
        }
        else {
            element.after(error);
        }
    }
});
$("div#partner_registration form .manditory").each(function () {
    $(this).rules("add", { required: true });
});
$("input:radio").click(function () {
    var this_name = $(this).attr("name");
    if ($(this).hasClass('optional_button')){
        $("input.optional_input").filter(function() {return $(this).attr('id') == this_name; }).focus();
    }
    else {
        $("input.optional_input").filter(function() {return $(this).attr('id') == this_name; }).val("").rules("remove");
    }
});
$("input.optional_input").focus(function () {
    $(this).rules("add", { required: true });
    var this_id = $(this).attr("id");
    $("input:radio").each(function() {
        if($(this).attr('name') == this_id && $(this).hasClass('optional_button') == false) $(this).attr('checked', false);
        if($(this).attr('name') == this_id && $(this).hasClass('optional_button') == true) $(this).attr('checked', true);
    });
});
$("input.optional_input").keyup(function () {
    var this_name = $(this).attr("id");
    var this_val = $(this).val();
    $("input.optional_button").filter(function() {return $(this).attr('name') == this_name; }).val(this_val);
});

Надеюсь, это поможет

Answer 3

http://bassistance.de/jquery-plugins/jquery-plugin-validation/