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

Question

我在一个页面上有多个表单，它们因表单的 ID 而异。 ID 的不同之处在于附加的 _0、_1、_2 等（由 rails 每个 do 循环创建的索引值）。

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

这个 Fiddle 举例说明了我现在是如何解决这个问题的。 validation() 块内的代码在 jQuery 函数之间是相同的。我需要将选择器变量设置为如下内容：

$("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

可以使用标记中已经显示的 classes，或添加 class 来形成标签：

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

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

Answer 3

不要为增量 id 属性而烦恼。维护起来会很痛苦，并且会导致保持代码干燥的问题。这种东西正是 classes 的发明目的：

<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 class。不幸的是，当在包含多个表单元素的选择器上实例化时，错误突出显示（以及可能的其他功能）似乎在验证插件中被窃听，因此您需要依次遍历每个表单：

$(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 选择器

Set jquery selector dynamically based on HTML form ID value

html

javascript

forms

jquery