Question

我有一个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）

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

提前致谢，詹姆斯。

Answer 1

不是使用一组新的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();

        }

在通过Ajax加载的表单上激活jQuery验证的正确方法是什么？

1 个答案: