0

我有一个 WordPress/BuddyPress 注册表单，我想通过 Ajax 调用处理表单提交，而不是直接提交页面。我有以下代码：

<script  type="text/javascript">

jQuery(document).ready(function(){
    setupValidation();
});

function setupValidation()
{
jQuery("#signup_form").validate({
    submitHandler: function(form) {

        jQuery("#signup_submit").attr('disabled', 'disabled');
        jQuery(".form-actions").html('<img src="/img/ajax-loader.gif" /> Processing...'); 

        jQuery.post('<?php echo $_SERVER['REQUEST_URI']; ?>', jQuery("#signup_form").serialize(), function(data) {

            var response = jQuery(data).find('#signup_form');

            if( jQuery(response).length )
            {
                jQuery('#signup_form').html(response);

                setupValidation();
            }
            else
            {
                    alert("Form submitted.");
                top.location = self.location.href;
                }
            });

        }
    });
}

</script>

基本上，这是通过 ajax 提交表单数据，然后检查响应以查看是否有错误。如果有错误，我想用响应 HTML 替换旧表单 HTML，以便在原始表单中显示任何错误消息。

我遇到的问题是，虽然验证处理初始表单正常运行，但当出现错误并重新加载表单时，验证不会初始化。相反，在控制台中，我收到此错误：

Uncaught TypeError: Cannot read property 'settings' of undefined

每次单击或聚焦 ajax 加载表单上的字段时，都会重复此错误。此外，submitHandler 似乎第二次不起作用，表单只是提交了老式的方式。（没有阿贾克斯）

对此的任何帮助将不胜感激。似乎我缺少一些简单的东西，但我不确定它是什么。我要做的就是在通过 ajax 加载的表单上重新初始化验证代码。

提前感谢，詹姆斯。

4

1 回答 1

0

与其使用一组新的 HTML 完全重新加载表单，不如直接重置表单？

如果响应包含除了表单之外的重要消息，也许只需返回消息并将其粘贴在表单中的某个位置......

        if( jQuery(response).length )
        {
            //jQuery('#signup_form').html(response);
            jQuery('#messages').html(response);//would need to create a div with id of "messages"

            jQuery('#signup_form').data('validator').resetForm();
            jQuery('#signup_form').get(0).reset();

        }
于 2013-05-17T21:29:04.380 回答