jQueryバリデーションプラグインを別の名前で入力するには？

Question

私は入力で別の名前で動作します！ フォームで送信をクリックした後にすべて表示エラー<label for="passenger"></label>

どうすれば分けられますか？

例：ホテルの3つの部屋を選択しました。

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を複製しているようです。

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