jquery - Jquery 动态追加验证

Question

我有一个下拉菜单，它在更改时会在 HTML 中附加一个文本框。我想将 jQuery 验证添加到该文本框并在特定字段集 id 上附加验证。我应该遵循什么流程？

有关上下文，请参阅此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();

});
});

score 1 · Accepted Answer

您可以添加一个类，例如class: "age"在创建文本框时添加一个类，然后在提交按钮上添加一个单击侦听器，该按钮将使用该each功能检查每一个。

我在这里添加了一个示例：http: //jsfiddle.net/pYRj3/32/

score 0 · Accepted Answer

您的代码非常复杂，因此我将提供更通用的代码示例，您可以将它们应用于您的情况。

在插件初始化后，添加/删除规则的主要方法是使用插件中已经内置的方法......

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

请参阅所有文档： http: //docs.jquery.com/Plugins/Validation#Plugin_methods

要将规则添加到动态创建的字段，您将在创建字段后立即使用该rules('add')方法。

$('[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/

一种更简单的方法是使用addClassRules 方法创建一个。它可以包含一个规则或规则的组合（规则的组合称为“复合规则”）。 class

$.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/

jquery - Jquery 动态追加验证

2 回答 2

Related

Reference