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

【问题标题】：Set jquery selector dynamically based on HTML form ID value根据 HTML 表单 ID 值动态设置 jquery 选择器
【发布时间】：2015-01-22 15:34:27
【问题描述】：

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

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

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

$("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());
        }
    });
});

【问题讨论】：

你最好使用类或任何横向选择器来绑定事件，例如：$('.form form').validate(...);
有人需要制作一张蝙蝠侠拍打罗宾的图像，罗宾问“我如何使用 JQuery 进行 ID 选择”，蝙蝠侠用“停止过度使用 IDS！”打断。仅当整个世界中只有一种此类事物时才使用 ID。
每个表单的所有规则都相同吗？如果是这样，您可以使用以选择器开头的 id：jQuery("form[id^='question_response']" ) 但正如其他人所说，我会添加一个类
@Katana314 我试过在这种情况下使用类。似乎 jQuery validation() 需要每个表单的 ID 才能知道将错误 HTML 代码附加到哪个表单。查看使用类作为选择器的更新小提琴：jsfiddle.net/7w6huhp9/4
@Questifer Darn;如果 JQuery 短暂地放弃其“对多个元素进行操作”的规则，那将非常令人困惑。 Pete 说得对，它仍然可以通过类工作，但是您需要通过函数内部的适当变量引用来跟踪表单，而不是选择 ID。

标签： javascript jquery html forms

【解决方案1】：

不要打扰增量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>

现在您只需要将 validate 附加到 .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

【讨论】：

在这里使用类似乎对我不起作用。如果您使用类，jQuery validation() 似乎会将错误消息附加到第一个输入。见：jsfiddle.net/7w6huhp9/4
@Questifier 这很令人失望。我想我什至可以将其作为验证中的错误提出。
没问题，很乐意提供帮助。

【解决方案2】：

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

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

有关事件对象的信息可在此处获得：http://api.jquery.com/category/events/event-object/

【讨论】：

【解决方案3】：

可以使用标记中已经显示的类，或者添加一个类来形成标签：

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

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

【讨论】：