jquery動態追加驗證

Question

我有一個下拉菜單，其中，更改附加HTML中的文本框。我想將jQuery驗證添加到該文本框，並在特定的字段集標識上附加驗證。我應該遵循什麼程序？

關於上下文，請參閱此JSFiddle。如果用戶選擇「需要更多房間或有孩子」，然後選擇> 0的兒童數量，則出現年齡文本框。我想補充驗證，以確保孩子們的年齡是介於0和9

HTML：

<div id="guestsRooms" class="clear"> 
    <label class="label1" for="guestsRoomsSelect">Guests:</label> 
    <span> 
     <span> 
      <select id="guestsRoomsSelect" name="GuestsRooms" style="width: 217;  padding: 5px"> 
       <option value="1-1">1 adult</option> 
       <option selected="selected" value="2-1">2 adults in 1 room</option> 
       <option value="3-1">3 adults in 1 room</option> 
       <option value="4-1">4 adults in 1 room</option> 
       <option value="2-2">2 adults in 2 rooms</option> 
       <option value="0">Need more rooms or have children?</option> 
      </select> 
     </span> 
    </span> 
</div> 

<div id="roomconfig" class="roomconfig_fc"> 
<div id="Addition"> 

</div> 


    <div class="btnWrap" style="clear:both;border-bottom: 0.5px solid #FFFFFF;"> 
<a class="addRoom" style="background-image:none; color:darkred;height:20px; margin-left:0px" href="javascript:void(0);"><img src="../Images/SearchBox/image1.png" class="addimage " /> 
Add room</a> 
</div>  
<input type="submit" value="submit"> 

</div> 

的jQuery：

$(document).ready(function(){ 
var counter = 0; 
var forage = 0; 
$('#roomconfig').hide(); 

    var index = 0; 

function childage(){ 

$('.hc_evt_children').bind("change",function() { 

    var item=(this).id; 
    // alert(item); 
$parentElement = $(this).parent().parent('div'); 

var id = $parentElement.attr("class"); 
    // alert(id); 
var index1 = $("." + id + " input").size(); 
// alert(index1); 

var requested = $(this[this.selectedIndex]).val() 
//alert(requested); 

if (requested > index1) { 
      for (i = index1; i < requested; i++) { 
       var $ctrl = $('<input/>').attr({ type: 'text', name: 'text', value: '',style:'width:30px;' }); 
       var my=$(this).closest("div"); 
       my.append($ctrl); 
       } 
     } 
     else if (requested < index1) { 
      var x = requested - 1; 
       $("." + id +" input:gt(" + x + ")").remove(); 
      } 
    if(requested==='0'){ 

     $("." + id + " input").remove(); 
    } 

}); 
} 
$('#guestsRoomsSelect').change(function() { 

     if ($(this).val() === '0') { 

     var $var2 = '<div id="dropdown2_ ' + (counter) + ' " class="class1"> <div class="wrapadults" style="float:left"> <label class="lbl_sm" style="font-size: 0.75em" for="adults">Adults</label>' 
       $var2 = $var2 + '<br/><span> <span>  <select id="adults" class="t_adults" style="margin-left:7px;margin-right:7px; border-right: 0.5px solid #FFFFFF;">  <option value="1">1</option>  <option value="2" selected="selected">2</option>' 
       $var2 = $var2 + '<option value="3">3</option>  <option value="4">4</option>  <option value="5">5</option>  <option value="6">6</option>  <option value="7">7</option>' 
       $var2 = $var2 + '<option value="8">8</option>  <option value="9">9</option>  <option value="10">10</option>  </select>  </span>  </span> </div>' 
       $var2 = $var2 + '<div class="children_'+forage+'" > <label class="lbl_sm" style="font-size: .75em;" for="children">Children</label><br/> <span> <select id="hc_f_children_' + forage + '" class="hc_evt_children " style="border-right: 0.5px solid #FFFFFF;">' 
       $var2 = $var2 + '<option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option>' 
       $var2 = $var2 + '<option value="4">4</option> </select> </span> </div> </div>'; 
       $("#Addition").prepend('<fieldset id="' + counter + '" data-index="' + index + '">' + $var2 + '</fieldset>'); 
       counter = counter + 1; 
       index++; 
       forage++; 
       $('#roomconfig').show(300); 
       } 
     else if ($(this).val() === '1-1' || $(this).val() === '3-1' || $(this).val() === '4-1' || $(this).val() === '2-2' || $(this).val() === '2-1') { 

      $('#roomconfig').hide(300); 

      $('#Addition fieldset :first').remove(); 
     } 
    childage(); 


}); 

$(".addRoom").click(function() { 
     // on add room event 

     var $var1 = '<div id="dropdown2_ ' + (counter) + ' " class="class1"> <div class="wrapadults" style="float:left"> ' 
     $var1 = $var1 + '<span> <span> <select id="adults" class="t_adults" style="margin-left:7px;margin-right:7px; border-right: 0.5px solid #FFFFFF;">  <option value="1">1</option>  <option value="2" selected="selected">2</option>' 
     $var1 = $var1 + '<option value="3">3</option>  <option value="4">4</option>  <option value="5">5</option>  <option value="6">6</option>  <option value="7">7</option>' 
     $var1 = $var1 + '<option value="8">8</option>  <option value="9">9</option>  <option value="10">10</option>  </select>  </span>  </span> </div>' 
     $var1 = $var1 + '<div class="children_'+forage+'" > <span> <select id="hc_f_children_' + forage + '" class="hc_evt_children " style="border-right: 0.5px solid #FFFFFF;">' 
     $var1 = $var1 + '<option value="0" selected="selected">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option>' 
     $var1 = $var1 + '<option value="4">4</option> </select> </span> </div> <div id="chileage_'+forage+'" class="ch"></div> </div>' 
     $var1 = $var1 + '<div class="btnrmv" id="' + counter + '" > <a class="removeRoom " style=" width:30px; height:0px; margin:0px;left:200px;position:relative; top:-30px; background-image:none; color:#b11500;font-weight:normal;font-size:0.77em;" href="javascript:void(0);">remove<span></span> </a> </div>'; 

     $("#Addition").append('<fieldset id="' + counter + '" data-index="' + index + '"' + $var1 + '</fieldset>'); 

     counter++; 
     index++; 
     forage++; 
     // for remove element 
     $(".btnrmv").click(function() { 
      $("#roomconfig fieldset#" + this.id).remove(); 
      counter--; 

     }); 

     childage(); 

}); 
}); 

Answer 1

你可以添加一個這樣的類爲class: "age"當您創建文本框，然後點擊偵聽器提交按鈕，將使用each函數檢查每個。

我在這裏補充一個例子：http://jsfiddle.net/pYRj3/32/

Answer 2

你的代碼是相當複雜的，所以我將提供更通用的代碼示例，您可以將您的情況。

的主要方式來添加/刪除規則，插件初始化後，與已建成的插件的方法...

• rules('add')
• rules('remove')

見所有文件：http://docs.jquery.com/Plugins/Validation#Plugin_methods

---

要將規則添加到動態創建的字段中，您可以在創建字段後立即使用the rules('add') method。

$('[name="Field2"]').rules('add', { 
    required:true, 
    messages: { 
     required: "Custom message." 
    } 
}); 

或者一次爲許多新的領域，使用 「開始以」 選擇和.each ...

$('[name^="Field"]').each(function() { 
    $(this).rules('add', { 
     required:true, 
     messages: { 
      required: "Custom message." 
     } 
    }); 
}); 

這種方法的簡單演示：http://jsfiddle.net/xCY4T/1/

---

一個更簡單方式是創建 a class使用the addClassRules method。它可以包含一個規則或規則的組合（規則的組合稱爲「複合規則」）。

$.validator.addClassRules("MyRule", { 
    required: true, 
    range: [0, 9], 
    // another rule, etc. 
}); 

然後，當你創建新的領域，只是確保他們每個都包含沿着class="MyRule"具有獨特name，當然。

<input type="text" name="Field1" class="MyRule" /> 
<input type="text" name="Field2" class="MyRule" /> 

這種方法非常簡單，但對於默認消息沒有重疊。

簡單的演示：http://jsfiddle.net/xCY4T/3/