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/

Answer 2

你可以尝试这个：

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 3

我想出了一个解决方案。

基本上，我根据所选的无线电选项在文本输入中添加/删除了验证规则，以便在用户选择“其他”无线电输入时无法提交表单。当输入文本时，我更新了“其他”无线电输入的值。

以下是代码：

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

希望有所帮助

jQuery使用可选文本验证插件广播

3 个答案: