在使用Ajax生成的表单上使用jquery验证插件 [英] Using the jquery validation plugin on a form that is generated using Ajax

问题描述

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

When using the jQuery validation plugin, how do I validate a form that is generated using ajax?

我的意思是要问，表单在页面加载时最初并未出现在页面上，而是使用ajax添加到页面中.

I mean to ask, the form does not initially appear on the page when the page loads, but is added to the page using ajax.

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

I'm following the examples on bassistance.de/jquery-plugins/jquery-plugin-validation/, but it seems that the validation plugin will not validate the form. Otherwise, it works fine. Is there a way to do this. Just like jquery uses live(), is there something I can use to make the plugin work in this scenario?

我是这样做的:

$("#thisForm").validate({

    rules: {

    },

    messages: {

    },

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

        beforeSend: function(html) {

        },

    success: function(signInData) {


        },

        });
    }
});

推荐答案

引用OP:

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

"... the form does not initially appear on the page when the page loads, but is added to the page using ajax. ... like jquery uses live(), is there something I can use to make the plugin work in this scenario?"

没有可用的方法来将jQuery Validate插件绑定到尚未构造的表单.

There is no method available to delegate binding the jQuery Validate plugin to a form that has not yet been constructed.

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

Since .validate() is the initialization method for the plugin, you simply need to call it immediately after you dynamically create this form.

但是，您尚未显示创建表单的代码，因此本示例假定您通过单击某些内容来创建表单.根据需要进行调整……请记住，在调用.validate()初始化插件之前，需要确保ajax已完成(新表单存在).

However, you have not shown the code that creates the form, so this example assumes you create the form by clicking something. Adjust this as needed... just keep in mind that you need to make sure the ajax is complete (the new form exists) before calling .validate() to initialize the plugin.

$(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:-请求完成时要调用的函数(之后 执行成功和错误回调).

complete: - A function to be called when the request finishes (after success and error callbacks are executed).

请参见: http://api.jquery.com/jQuery. ajax/

这篇关于在使用Ajax生成的表单上使用jquery验证插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！