Question

此表单的目标是让用户能够回答人们提出的问题。用户将在下面的响应字段中有几个问题。我想使用jQuery验证插件来验证它们是否在响应字段中输入文本并接受这些条款。

我当前的解决方案成功验证了第一个表单（回答问题＃1），但随后的回复表单问题似乎没有适用于它们的jQuery验证。

我已经在表单中应用了一个类，并在每个字段名称的末尾添加了一个索引号，以使它们唯一，我仍然遇到同样的问题。

HTML

    <div class="form">
    <p>Question #1 text</p>
    <form id="question_response" class="question_response">
        <input type="text" name="response_1"></input>
        <input type="submit">
    </form>
</div>
<div class="form">
    <p>Question #2 text</p>
    <form id="question_response">
        <input type="text" name="response_2"></input>
        <input type="submit">
    </form>
</div>
<div class="form">
    <p>Question #3 text</p>
    <form id="question_response">
        <input type="text" name="response_3"></input>
        <input type="submit">
    </form>
</div>

JS

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

Answer 1

尝试使用类并为每个<input>元素设置唯一ID

<form class="question_response">
        <input type="text" name="response"></input>
        <input type="submit">
</form>

 $(".question_response").validate({

如何在一个页面上的同一表单的多个副本上使用jQuery验证

1 个答案: