javascript - 带有动态表单的jQuery验证插件

Question

如果尚未创建表单，如何使用此代码（来自演示）：

jQuery("#form").validate({
  submitHandler: function(form) {
    jQuery(form).ajaxSubmit({
      target: "#result"
    });
  }
});

一种不起作用的方法是on('click',像这样调用验证：

$(document.body).on('click', '.submitBtn', function(){
   var $form =$('form'+this.id);
       $form.validate({
         submitHandler: function($form) {
           $form.ajaxSubmit({
             target: "#result"
           });
         }
       });
});

有什么建议么？

Answer 1

jQuery("#form").validate().form()创建表单后 尝试使用。http://docs.jquery.com/Plugins/Validation/Validator/form

$(document.body).on('click', '.submitBtn', function(){
   var $form =$('#form'+this.id);
       $form.validate({
         submitHandler: function($form) {
           $($form).ajaxSubmit({  //need to properly refer to jQuery object
             target: "#result"
           });
         }
       }).form();
});

Answer 2

我认为这个类似问题的答案可以帮助你很多https://stackoverflow.com/a/4359915/351366

这是使其更具体到您的代码的一个镜头

创建一个自定义事件以在您的表单出现在页面上时触发

$(document).bind('bindForm', function (e) {
    jQuery("#form").validate({
        submitHandler: function(form) {
          jQuery(form).ajaxSubmit({
             target: "#result"
          });
        }
    });
});

然后当你的表单被加载时，触发你的自定义事件

$(document).trigger('bindForm'); //trigger our validate form

当您想检查您的表单在另一个函数中是否有效时

$(".submitBtn").live("click",function() {
    if (!$("#form").validate().form()) {
        return;
    }
});