![](/img/trans.png)
[英]How to validate input fields with a dot in name using the jquery validation plugin?
[英]How to use jQuery validation plugin in input with different name?
我在輸入中使用不同的名稱!!! 在表單中點擊提交后,所有<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"
}
}
});
});
問題是,您在這里進行概括,並且對多個元素使用相同的id
:
$(element).closest("form").find("label[for='" + element.attr("id") + "']").append(error);
因此,您需要將其更改為與該元素相關的內容。 此外,看起來您正在復制id
,這是一種犯罪。
將passenger
s 的id
更改為passenger
passenger_1
、 passenger_2
...等等,它應該可以工作。
"<div class='field-row clearfix'>" +
"<label for='passenger_" + i +"'></label> " +
"<input id='passenger_" + i +"' name='passenger_" + i +"' required type='text'> " +
"</div>" +
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.