如何使用jQuery驗證插件驗證動態內容

我遇到了驗證某些動態內容的問題。最近我找到類似的問題是這樣的： jquery-validate-is-not-working-with-dynamic-content 如何使用jQuery驗證插件驗證動態內容

我的表單是一個基本的形式，輸入名稱，電子郵件，電話等，但有這個問題「有多少乘客？」這是一個select並根據您選擇多少乘客，我使用jQuery以此來創建基於此金額字段：

$('select.travellers').attr('name','Number of travelers').on('click', function() { 
      var travellers = this.value; //On change, grab value 
      var dom = ""; 
      for(var i = 0; i < travellers; i++){ //for 0 is less than travellers 
       dom += '<label>Full Name</label>'; 
       dom += '<input type="text" name="FullName_'+i+'">'; 
       dom += '<label>Food&nbsp;requirements</label>'; 
       dom += '<select size= "0" name="Food Requiries_'+i+'" tabindex="-1" > 
         <option value="No pork">No pork</option> 
         <option value="Halal">Halal</option> 
         <option value="Food allergies">Food allergies</option> 
         <option value="Other">Other</option></select>'; 
      } 
      $('.form_Additional').html(dom); //add dom into web page 
     });

輸出爲input現場要求額外的旅客姓名和select詢問他們的食物需求

如何驗證這些新創建的元素？這是我到目前爲止：

$(document).ready(function(e) { 

    //validation rule for select 
    $.validator.addMethod("valueNotEquals", function(value, element, arg){ 
     return arg != value; 
    }, "Value must not equal arg."); 


    //validate form 
    $("#FORMOB7DC24203803DC2").on("click", function(event){ 
     $(this).validate({ 
      rules: { 
       FullName:{ 
        required: true 
       }, 
       FullName_0:{ 
        required: true 
       }, 
       'Number of travelers':{ 
        valueNotEquals: "Please select" 
       } 
      } 
     }); 
    }); 
});

有沒有辦法讓這種動態？由於這種形式允許最多30名乘客，我不希望在規則FullName_0，FullName_1，手動編寫FullName_2等等等等

我添加了此規則FullName_0，它不驗證，所以我不知道是什麼我做錯了。

注 - 對於可讀性

來源

2014-09-11 Akira Dawson

看看http://jsfiddle.net/arunpjohny/2fu7t2f3/1/ – 2014-09-11 03:54:29

@ArunPJohny謝謝你那。有沒有辦法使規則動態？我不想爲FullName_0，FullName_1，FullName_2，FullName_3等添加一條規則 – 2014-09-11 04:00:14

@ArunPJohny，我看到錯誤消息已被看到，但是你在哪裏調用jQuery中的錯誤消息？我沒有看到無論是在DOM： – 2014-09-11 04:02:51

您可以使用要添加的屬性規則類似

dom += '<input type="text" name="FullName_' + i + '" required>';

演示：Fiddle

來源

2014-09-11 04:11:46

這就是我所做的。我不得不這樣做是爲了實現創建的元素的驗證：需要{ ：規則：{ 真實姓名：{ 要求：真實 }， FullName_0：{ 要求：真實 }， FullName_1真根據您的小提琴 }} ，這裏http://jsfiddle.net/arunpjohny/2fu7t2f3/1/ – 2014-09-11 04:16:42

如果看到小提琴的答案，它添加'required'屬性 – 2014-09-11 04:18:10

可以對不起但是我不理解。 – 2014-09-11 04:21:31

您需要使用

$(document).on('click', '#FORMOB7DC24203803DC2', function(e) { 
    validate(); 
});

這允許您驗證的內容添加到網頁隨時簡化代碼。

來源

2014-09-11 03:54:27

如何使用jQuery驗證插件驗證動態內容

回答

相關問題