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://bassistance.de/jquery-plugins/jquery-plugin-validation/< /a>

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:// /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 一起包含在内