3

使用 jQuery 验证插件时，如何验证使用 ajax 生成的表单？

我的意思是问，页面加载时表单最初不会出现在页面上，而是使用ajax添加到页面中。

我正在关注bassistance.de/jquery-plugins/jquery-plugin-validation/上的示例，但似乎验证插件不会验证表单。否则，它工作正常。有没有办法做到这一点。就像 jquery 使用 live() 一样，我可以使用什么来使插件在这种情况下工作吗？

我这样做是这样的：

$("#thisForm").validate({

    rules: {

    },

    messages: {

    },

    submitHandler: function() {
    $.ajax({
            type: "POST",
             url: "/",
            data: $('#thisForm').serialize(),
        dataType: "json",
           cache: false,

        beforeSend: function(html) {

        },

    success: function(signInData) {


        },

        });
    }
});
4

4 回答 4

3

引用操作：

“......当页面加载时，表单最初不会出现在页面上，而是使用 ajax 添加到页面中。......就像 jquery 使用的一样live()，有什么东西可以让插件在这种情况下工作吗？”

没有可用于将 jQuery Validate 插件绑定到尚未构建的表单的方法。

由于.validate()是插件的初始化方法，您只需在动态创建此表单后立即调用它。

但是，您还没有显示创建表单的代码，因此本示例假设您通过单击某些内容来创建表单。根据需要调整它......请记住，在调用.validate()初始化插件之前，您需要确保 ajax 是完整的（新表单存在）。

$(document).ready(function() {  // ensure the DOM is ready

    $('#something').on('click', function() { // clicking something to create the form

        $.ajax({  // your ajax code to create the form
            // your ajax options,
            complete: function() { // fires after the ajax is fully complete
                $("#thisForm").validate({ // initialize the plugin on the new form
                    // options & rules
                });
            }
        });

    });

});

complete:- 请求完成时调用的函数（在 执行成功和错误回调之后）。

请参阅： http ://api.jquery.com/jQuery.ajax/

于 2013-09-08T13:57:12.170 回答
0

尝试.on()像这样添加 DOM 委托

$("body").on("validate", "#thisForm", function() {

});

编辑以解决以下评论：

如果无法通过父元素委托事件，则必须在将事件处理程序放入 DOM 后绑定它。下面是一个使用 jQuery 的例子：

$("addmyHTMLhere").html('<form></form>').find('form').validate({put your validate stuff here});
于 2013-09-07T23:31:06.160 回答
0

遇到同样的问题，不确定是否有更好的方法来做你想做的事，但这就是我想出的：

$(document.body).on('submit', '#myform', function(e){

    // Set your validation settings and initialize the validate plugin on the form.
    $(this).validate({
        submitHandler: function(form) {
            // do your ajax submit or whatever you want.
        }
    });

    // submit the form pro grammatically.
    $(this).submit();
});

再次，也许有更好的方法来做到这一点，但这是我认为到目前为止工作良好的方法。

于 2014-08-12T20:34:28.077 回答
0

我在通过 AJAX 加载表单并且还想用 AJAX 提交表单时也遇到了这个问题（留在当前页面上......）。这对我有用：

//Newbie note: ajaxFormCallback is the callback function - which runs once my AJAX loaded form has been added to the page.

var ajaxFormCallback = function(){
    var form = $('#form-id-here');

    form.validate({
        rules: {
            'name': {
                required: true
            },
            'email': {
                required: true,
                email: true
            }
        },
        messages: {
            'name': {
                required: 'Name is required'
            },
            'email': {
                required: 'Email address is required',
                email: 'Invalid email address'
            }
        },
        submitHandler: function(form){
            //submit form via AJAX
            $.ajax({
                type: 'POST',
                url: '/path/to/submit/form/?' + $(form).serialize() + '&ajax=1',
                success: function(data){
                    //replace my form with a response:
                    $(form).parents('.response').replaceWith(data);
                }
            });
        }
    });
};
于 2015-11-04T17:50:47.867 回答