Question

jQuery 1.7.2
jQuery Validate 1.1.0
jQuery Form 3.18
Wordpress 3.4.2

我正在尝试使用上面的jQuery库在上面的环境中编写联系人/邮件表单。现在我遇到了jQuery Form JS的问题：

我从ajaxSubmit的开发者页面获取了原始代码，并且仅将目标选项更改为我的HTML源代码中存在的ID，并在函数$中使用jQuery替换showRequest

问题是，以success:命名的函数不会触发。我用error:尝试了同样的事情，并没有解雇任何事情。

只有complete:做了，我放在那里的功能提醒接收脚本responseText。

有没有人知道什么是错的？

代码：

jQuery(document).ready(function() {
var options = { 
    target:        '#mail-status',   // target element(s) to be updated with server response 
    beforeSubmit:  showRequest,  // pre-submit callback 
    success:       showResponse,  // post-submit callback 

    // other available options: 
    //url:       url         // override for form's 'action' attribute 
    //type:      type        // 'get' or 'post', override for form's 'method' attribute 
    //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
    //clearForm: true        // clear all form fields after successful submit 
    //resetForm: true        // reset the form after successful submit 

    // $.ajax options can be used here too, for example: 
    //timeout:   3000 
};
jQuery("#mailform").validate(
{
    submitHandler: function(form)   { jQuery(form).ajaxSubmit(options); },
    errorPlacement: function(error, element) { },
    rules: {
        author: {
            minlength: 2,
            required: true
        },
        email: {
            required: true,
            email: true
        },
        comment: {
            minlength: 2,
            required: true
        }
    },
    highlight: function(element) 
    {
        jQuery(element).addClass("e");
        jQuery(element.form).find("label[for=" + element.id + "]").addClass("e");
    },
    unhighlight: function(element) 
    {
        jQuery(element).removeClass("e");
        jQuery(element.form).find("label[for=" + element.id + "]").removeClass("e");
    }
});
});
// pre-submit callback 
function showRequest(formData, jqForm, options) { 
// formData is an array; here we use $.param to convert it to a string to display it 
// but the form plugin does this for you automatically when it submits the data 
var queryString = jQuery.param(formData); 

// jqForm is a jQuery object encapsulating the form element.  To access the 
// DOM element for the form do this: 
// var formElement = jqForm[0]; 

alert('About to submit: \n\n' + queryString); 

// here we could return false to prevent the form from being submitted; 
// returning anything other than false will allow the form submit to continue 
return true; 
} 
// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  { 
// for normal html responses, the first argument to the success callback 
// is the XMLHttpRequest object's responseText property 

// if the ajaxSubmit method was passed an Options Object with the dataType 
// property set to 'xml' then the first argument to the success callback 
// is the XMLHttpRequest object's responseXML property 

// if the ajaxSubmit method was passed an Options Object with the dataType 
// property set to 'json' then the first argument to the success callback 
// is the json data object returned by the server 

alert('status: ' + statusText + '\n\nresponseText: \n' + responseText + 
    '\n\nThe output div should have already been updated with the responseText.'); 
}

Answer 1

查看验证是否成功并调用jQuery(form).ajaxSubmit(options);。

Answer 2

_{这是作为原始提问者的编辑添加的，我已将其转换为社区维基答案，因为它应该是答案，而不是编辑。}

找到原因/错误。它是由我将jquery.form.js排入队列的方式引起的，我将其存储在我的主题的子目录中。

我在wp_enqueue_script中传递了“jquery-form”作为句柄。 “jquery-form”已经由WP分配并连接到包含jquery.form.js的WP。包含的版本（2.x）不具备我通过的选项。

我必须取消注册指定的脚本并将句柄注册到我主题中存储的当前jquery.form.js。

ajaxSubmit选项成功＆amp;错误函数未被触发（Wordpress）

代码：

2 个答案: