How to use jQuery validation plugin in input with different name?

Question

I work with different name in input !!! after click submit in form show error in all <label for="passenger"></label>

How do I separate?

For example: You've selected three rooms of a hotel.

lenHotel = 3; number is changed.

add script:

<script src="../lib/jquery.js"></script>
<script src="../dist/jquery.validate.js"></script>

script is:

for(var i = 1; i <= lenHotel; i++) {
  $("#Step-02").find('#information-box').append(
    "<div class='box-content'>" +
    "<div class='field-row clearfix'>" +
        "<label for='passenger'></label> " +
        "<input id='passenger' name='passenger_" + i +"' required type='text'> " +
    "</div>" +
    "<div class='field-row clearfix'> " +
        "<div class='col-xs-6'> " +
            "<select id='country' name='country_" + i + "'> "+
                "<option value='1'>Country name</option>" +
                "<option value='2'>Country Name</option>" +
            "</select>" +
        "</div>" +
    "</div>" +
  "</div>"
 ); 
}

After print, HTML is:

<div class="box-content">
<div class="field-row clearfix">
    <label for="passenger"></label> 
    <input id="passenger" name="passenger_1" required="" type="text">
</div>
<div class="field-row clearfix">
    <div class="col-xs-6">
        <select id="p-status" name="country_1">
            <option value="1">Country name</option>
            <option value="2">Country name</option>
        </select>
    </div>
</div>
</div>
<div class="box-content">
<div class="field-row clearfix">
    <label for="passenger"></label> 
    <input id="passenger" name="passenger_2" required="" type="text">
</div>
<div class="field-row clearfix">
    <div class="col-xs-6">
        <select id="p-status" name="country_2">
            <option value="1">Country name</option>
            <option value="2">Country name</option>
        </select>
    </div>
</div>
</div>
<div class="box-content">
<div class="field-row clearfix">
    <label for="passenger"></label> 
    <input id="passenger" name="passenger_3" required="" type="text">
</div>
<div class="field-row clearfix">
    <div class="col-xs-6">
        <select id="p-status" name="country_3">
            <option value="1">Country name</option>
            <option value="2">Country name</option>
        </select>
    </div>
</div>
</div>

This validate function:

$().ready(function() {
// validate the form when it is submitted
var validator = $("#form_sample_1").validate({
    errorPlacement: function(error, element) {
        // Append error within linked label
        $(element).closest("form").find("label[for='" +
            element.attr("id") + "']").append(error);
        console.log(error);
    },
    errorElement: "span",
    messages: {
        passenger: {
            required: "Required",
            minlength: "Your passenger name must be at least 5 characters"
        }
    }
});
});

Are you asking how you separate elements with the same ID or name? Easy, you use a different name for each element, as you can't use the same name/ID for multiple elements — adeneo
– adeneo, Commented Oct 9, 2016 at 22:32
@adeneo Thank you so much, If you selected 10 rooms of a hotel. What should we do now? — mySun
– mySun, Commented Oct 9, 2016 at 22:36
actually, you can use the same name, and must do so for radio buttons if you want them to work properly — Jaromanda X
– Jaromanda X, Commented Oct 9, 2016 at 22:40
@JaromandaX, Thank you so mush, But my problem is in different message... — mySun
– mySun, Commented Oct 9, 2016 at 22:43

Praveen Kumar Purushothaman · Accepted Answer · 2016-10-09 22:33:28Z

1

The problem is, you are generalising here and you are using same id for multiple elements:

$(element).closest("form").find("label[for='" + element.attr("id") + "']").append(error);

So you need to change it to something that is relative to that element. Also, it looks like you are duplicating the id, which is a crime.

Change your id for the passengers to passenger_1, passenger_2... and so on and it should work.

"<div class='field-row clearfix'>" +
    "<label for='passenger_" + i +"'></label> " +
    "<input id='passenger_" + i +"' name='passenger_" + i +"' required type='text'> " +
"</div>" +

answered Oct 9, 2016 at 22:33

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mySun Over a year ago

Thank you so much, But how i do show different message in jQuery validate?

Praveen Kumar Purushothaman Over a year ago

@Shayvard messages: { passenger: { Here, change passenger to passenger_1 blah blah.

mySun Over a year ago

If you selected 10 rooms of a hotel. What should we do now?

Collectives™ on Stack Overflow

How to use jQuery validation plugin in input with different name?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related