Question

我在一个页面上有多个表单，这些表单根据表单的ID而不同。 ID的附加是_0，_1，_2等（由rails创建的索引值每个都循环）。

我正在尝试验证这些表单，但是为了保持我的代码DRY，我希望表单选择器是动态的。我需要以某种方式获取表单的ID值（“_ 0”）并将其添加到jQuery选择器。

这个Fiddle给出了我现在如何解决问题的例子。 validation（）块内部的代码在jQuery函数之间是相同的。我需要将selector变量设置为：

$("new_loan_question_answer_"+i)

我不确定如何将HTML表单的_0或_1传递给jQuery函数。

表单html

<div class="form">
    <p>Question #1 text</p>
    <form id="question_response_0">
        <input type="text" name="response"></input>
        <input type="submit">
    </form>
</div>
<div class="form">
    <p>Question #2 text</p>
    <form id="question_response_1">
        <input type="text" name="response"></input>
        <input type="submit">
    </form>
</div>

jquery的

$(function () {
    $("#question_response_0").validate({
        rules: {
            "response": {
                required: true
            }
        },
        messages: {
            "response": {
                required: 'This field is required'
            }
        },
        errorPlacement: function (error, element) {
            error.insertAfter(element.parent());
        }
    });
});

$(function () {
    $("#question_response_1").validate({
        rules: {
            "response": {
                required: true
            }
        },
        messages: {
            "response": {
                required: 'This field is required'
            }
        },
        errorPlacement: function (error, element) {
            error.insertAfter(element.parent());
        }
    });
});

Answer 1

例如，查看http://api.jquery.com/submit/。

如果您使用事件处理程序来调用函数，那么事件可能包含您需要的信息（提交表单的ID）。

有关事件对象的信息，请访问：http://api.jquery.com/category/events/event-object/

Answer 2

可以使用标记中已有的类，也可以添加类来形成标记：

$('div.form form').validate({/* options*/}) ;

这将包括与选择器匹配的所有表单，每个表单都有自己的验证实例

Answer 3

不要为增量id属性而烦恼。维护并导致代码干扰的问题变得很痛苦。这种事情完全发明了什么类：

<div class="form">
    <p>Question #1 text</p>
    <form class="question_response"> <!-- < use a common class on the form -->
        <input type="text" name="response"></input>
        <input type="submit">
    </form>
</div>
<div class="form">
    <p>Question #2 text</p>
    <form class="question_response"> <!-- < use a common class on the form -->
        <input type="text" name="response"></input>
        <input type="submit">
    </form>
</div>

现在您只需要将验证附加到.question_response类。不幸的是，当在包含多个表单元素的选择器上实例化时，似乎在验证插件中错误突出显示错误（可能还有其他功能），因此您需要依次遍历每个表单：

$(function () {
    $('.question_response').each(function() {
        $(this).validate({
            rules: {
                "response": {
                    required: true
                }
            },
            messages: {
                "response": {
                    required: 'This field is required'
                }
            },
            errorPlacement: function (error, element) {
                error.insertAfter(element.parent());
            }
        });
    });
});

Example fiddle

根据HTML表单ID值动态设置jquery选择器

3 个答案: