jQuery valider la radio plug-in avec le texte en option

Question

J'essaie de comprendre comment valider un élément de forme avec un mélange d'entrées radio et une entrée de texte:

<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="" /> 

J'ai compris comment obtenir le former à se comporter comme prévu (sélectionner et désélectionner) avec le code suivant:

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

J'espérais que je pouvais utiliser la classe « obligatoire » pour valider le mélange des entrées radio et texte:

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

Mais cela ne fonctionne pas comme prévu. Avec la radio (id = "questions [1] []") sélectionnée et l'entrée de texte contenant du contenu, l'élément de formulaire est toujours marqué comme non valide.

Suggestions ... peut-être une meilleure approche?

Merci d'avance.

MISE À JOUR

Désolé, je aurais dû préciser que j'utilise le plugin validate:

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

Answer 1

je me suis dit une solution. Fondamentalement, j'ai ajouté/enlevé une règle de validation à l'entrée de texte basée sur l'option de radio qui a été sélectionnée, de sorte que le formulaire n'a pas pu être soumis si l'utilisateur a sélectionné l'autre entrée radio. Lorsque le texte a été saisi, j'ai mis à jour la valeur de l'entrée radio «autre».

Voici le code:

<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="" /> 

... et 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); 
}); 

espoir qui aide

Answer 2

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

Answer 3

Vous pouvez essayer celui-ci:

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

Il a l'option de validation de bouton radio

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

L'initialisation du plug-in doit être quelque chose comme suit pour le balisage ci-dessus.

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

Vous aurez besoin jquery.validation.functions.js à inclure avec jquery.validate.js