使用jQuery驗證動態創建的內容驗證插件

Question

我知道有幾個人可能會問這個問題，但我很難找到一個解決方案來處理我的問題。我有這樣的表單，人們可以根據需要添加儘可能多的行（每行有4個輸入框），然後在不使用時刪除它們。我使用.append（）jquery函數添加行並使其工作。

我很難搞清楚如何驗證新的輸入框。有沒有人有一個很好的解決方案，我想要做什麼？這裏是一個鏈接到我的代碼：

$(document).ready(function() { 

var count = 1; 
$('p#add_field').click(function() { 

    count += 1; 

    $('table#entries').append(
     '<tr>' + 
     '<td><input id="cl_' + count + '" name="cl[]' + '" type="text" /></td>' + 
     '<td><input id="num_' + count + '" name="num[]' + '" type="text" size="5"/></td>' + 
     '<td><input id="description_' + count + '" name="description[]' + '" type="text" size="86"/></td>' + 
     '<td><span class="delete">Remove</span></td></tr>'); 

    $(".delete").click(function() { 
     $(this).closest('tr').remove(); 
    }); 

}); 





    // 1. prepare the validation rules and messages. 
    var rules = { 

     email: { 
      required: true, 
      email: true 
     }, 
     lname: "required", 
     fname: "required", 
     city: "required", 
     address: "required", 
     'cl[]': "required", 
     'num[]': "required", 
     'description[]': "required", 
     age: { 
      required: true, 
      number: true, 
      maxlength: 3 
     }, 
     phone: { 
      required: true, 
      phoneUS: true 
     } 



    }; // end var rules 


    // 2. Initiate the validator 
    var validator 
     = new jQueryValidatorWrapper("FormToValidate", 
      rules); 

    // 3. Set the click event to do the validation 
    $("#btnValidate").click(function() { 
     if (!validator.validate()) 
      return; 

     alert("Validation Success!"); 
    }); 
}); 

http://jsfiddle.net/9k7ph/4/

Answer 1

1）要調用.validate()您click處理程序中，所以它不能正常表單上的初始化。您只能在DOM上準備一次來初始化表單上的插件。

2）您不需要將提交按鈕放入點擊處理程序中。 jQuery Validate插件已經正確捕獲了click事件。

3）您的動態創建的字段必須具有唯一的name屬性，否則插件將失敗。

4）創建它們時，必須將規則動態添加到新創建的字段中。調用.validate()不是這樣做的......初始化後新的規則/選項將被忽略。您可以使用內置方法（如rules('add')），或者更容易，將class="required"添加到新的輸入字段，並自動選取此規則。

我放棄了你的小提琴，並從頭開始......基本驗證工作，現在你可以將其他插件重新插入它。

DEMO：http://jsfiddle.net/X5EvD/

$(document).ready(function() { 

    $("#FormToValidate").validate({ 
     rules: { 
      email: { 
       required: true, 
       email: true 
      }, 
      lname: "required", 
      fname: "required", 
      city: "required", 
      address: "required", 
       'cl[]': "required", 
       'num[]': "required", 
       'description[]': "required", 
      age: { 
       required: true, 
       number: true, 
       maxlength: 3 
      }, 
      phone: { 
       required: true, 
       phoneUS: true 
      } 
     }, 
     submitHandler: function (form) { 
      alert("Validation Success!"); 
      return false; // if you need to block normal submit because you used ajax 
     } 
    }); 

    var count = 1; 
    $('p#add_field').click(function() { 

     count += 1; 

     $('table#entries').append(
      '<tr>' + 
      '<td><input id="cl_' + count + '" name="cl[' + count + ']' + '" type="text" class="required"/></td>' + 
      '<td><input id="num_' + count + '" name="num[' + count + ']' + '" type="text" size="5" class="required"/></td>' + 
      '<td><input id="description_' + count + '" name="description[' + count + ']' + '" type="text" size="86" class="required"/></td>' + 
      '<td><span class="delete">Remove</span></td></tr>'); 


     $(".delete").click(function() { 
      $(this).closest('tr').remove(); 
     }); 

    }); 

});