Question

如何验证在页面上通过AJAX加载的表单。我正在使用jquery validate.js。插入。我通过ajax加载表单后调用validate函数，但它不起作用。

jquery代码：

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

        // do anything

     }
   });
});

任何帮助都将受到高度赞赏。

Answer 1

如果我假设您在main页面中有ajax页面和ajax表单，看起来您正在静态地在主页面中保留该表单验证的代码。甚至在ajax发生之前。

因此，当main页面加载时，验证代码会运行，但它找不到"#form"+id（因为它尚未加载）。因此插件的事件绑定失败。

您可以做的是发送验证脚本以及您的ajax响应，以便验证代码仅在您加载表单并且事件被正确绑定后运行。

OLD AJAX文件

//contains only the form

新AJAX文件

//contains the form 
//then contains the validation code.

注意 - 还有其他方法可以做到。就像使用jQuery的live方法一样。快速谷歌搜索将为您提供相当多的结果。

Answer 2

这是一个简单的语法错误，将"#form"+id更改为"form#"+id 这是jsfiddle。

$(document.body).on("click", "form", function () {
    var id = $(this).attr('id');
    $("form#" + id).validate({
        submitHandler: function () {
            alert("submit");
        }
    });
});

我想知道你为什么要用这种丑陋的方式来选择元素。如果表单没有id属性，则选择将失败。我认为this更好

验证在页面上通过AJAX加载的表单

2 个答案: