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] []」）選擇，以及包含內容的文本輸入，表單元素仍然被標記爲無效。

建議......也許更好的方法？

在此先感謝。

UPDATE

對不起，我應該澄清，我使用的驗證插件：

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

Answer 1

我想出了一個解決方案包括一起。

基本上，我基於選擇的無線電選項向文本輸入添加/刪除了驗證規則，以便在用戶選擇「其他」無線電輸入時無法提交表單。當輸入文本時，我更新了「其他」無線電輸入的值。

下面的代碼：

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

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

Answer 3

你可以試試這個：

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