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

Question

The goal of this form is to give a user the ability to respond to questions that people ask. A user will have several questions with response fields underneath. I want to use the jQuery validation plugin to validate that they enter text into the response field and accept the terms.

My current solution successfully validates the first form (responding to question #1) but the subsequent questions with response forms don't seem to have the jQuery validations applying to them.

I have applied a class to the forms and added an index number to the end of each field name to make them unique and I'm still getting the same issue.

Fiddle

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

Try use class and set unique ID for each <input> element

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

 $(".question_response").validate({