Question

我在输入中使用不同的名字！在所有<label for="passenger"></label>

中单击提交表单后显示错误

如何分开？

例如：您选择了酒店的三个房间。

lenHotel = 3;号码已更改。

添加脚本：

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

script是：

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

打印后，HTML为：

<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>

此验证功能：

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

Answer 1

问题是，您在这里进行概括，并且您对多个元素使用相同的id：

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

因此您需要将其更改为与该元素相关的内容。此外，您似乎正在复制id，这是一种犯罪行为。

将id的{{1}}更改为passenger，passenger_1 ...等等，它应该有效。

passenger_2

如何在输入中使用不同名称的jQuery验证插件？

1 个答案: