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

Set jquery selector dynamically based on HTML form ID value

本文关键字：设置 jquery 选择器 动态 HTML 表单 ID 根据      更新时间：2023-09-26

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

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

这首小提琴举例说明了我现在如何解决这个问题。validation（） 块中的代码在 jQuery 函数之间是相同的。我需要将选择器变量设置为如下所示：

$("new_loan_question_answer_"+i)

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

表单网页

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

不要为增量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());
            }
        });
    });
});

示例小提琴

例如，

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

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

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

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

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

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

相关文章：