JQuery验证需要点击提交两次提交表单 [英] jquery validate need to click submit twice to submit form
问题描述
我有一个模式的一种形式，用户必须填写表格（否则验证会显示所需的字段错误消息），然后点击提交输入类型，它什么都不做，然后他们再次单击它，然后它会通过AJAX发布，并返回一个谢谢的字样。
我环顾四周＃1和应用我有答案的问题，但我仍然无法得到它的工作。我没有删除事件preventDefault（）。从中，以及$（＃审查形式）。递交（函数（事件）{和表单提交像它应该点击提交一次输入后，但它不会发布到数据库。
下面是jQuery的为＃审查形式
$（＃回顾 - 表）。验证（{
submitHandler：函数（）{
$（＃审查形式）。递交（函数（事件）{
VAR等级= $（本）.find（'输入[名称=等级]'）;
//变种等级= $（本）.find（'输入[名称=等级]）VAL（）。
VAR复习= $（本）.find（'textarea的[名称=评论]'）;
VAR form_settings = $（本）.find（'输入[名称= form_settings]'）;
VAR XID = $（本）.find（'输入[名称= XID]'）;
VAR entry_id = $（本）.find（'输入[名称= entry_id]'）;
VAR条目类型= $（本）.find（'输入[名称=条目类型]'）;
VAR SITE_ID = $（本）.find（'输入[名称= SITE_ID]'）;
VAR FIRST_NAME = $（本）.find（'输入[名称= FIRST_NAME]'）;
VAR MIDDLE_INITIAL = $（本）.find（'输入[名称= MIDDLE_INITIAL]'）;
$阿贾克斯（{
网址：$（＃审查形式）ATTR（行动），//你的服务器端脚本
数据：$（本）.serialize（）
键入：POST，
成功：功能（数据）{
//$('#response').append('<li>+数据+'＆LT; /李＆GT;'）;
$（'＃审查形式）隐藏（）;
$（'＃审查形式响应）HTML（＆LT; H3风格=文本对齐：中心;！＆GT;谢谢，您的评论已提交＆LT; / H3＆gt;中）;
}，
错误：函数（jxhr，味精，ERR）{
$（'＃响应）追加。（'＆LT;李风格=颜色：红色＆GT;+味精+'＆LT; /李＆GT;'）;
}
}）;
。事件preventDefault（）;
}）;
}
}）;
更新：我去掉了$（＃审查形式）递交（函数（事件）{}）;我改变了$（本）.find ......和检索指定的＃形式审查形式的ID，那么过去的直通数据参数。我评论了所有的单个变量和刚好路过$（本）.serialize（）到数据参数，并没有奏效。
下面code工作在Chrome和Firefox，但在Firefox，关闭模式并重定向到站点的主页，它应该保持模式与感谢您味精开放的，就像它在Chrome浏览器：
$（＃回顾 - 表）。验证（{
submitHandler：函数（）{
$阿贾克斯（{
网址：$（＃审查形式）ATTR（行动），//你的服务器端脚本
数据：$（＃审查形式）序列化（）。
键入：POST，
成功：功能（数据）{
$（'＃审查形式）隐藏（）;
$（'＃审查形式响应）HTML（＆LT; H3风格=文本对齐：中心;！＆GT;谢谢，您的评论已提交＆LT; / H3＆gt;中）;
}，
错误：函数（jxhr，味精，ERR）{
$（'＃响应）追加。（'＆LT;李风格=颜色：红色＆GT;+味精+'＆LT; /李＆GT;'）;
}
}）;
。事件preventDefault（）;
}
}）;
最终工作产品：
$（＃回顾 - 表）。验证（{
submitHandler：函数（）{
$阿贾克斯（{
网址：$（＃审查形式）ATTR（行动）。
数据：$（＃审查形式）序列化（）。
键入：POST，
成功：功能（数据）{
$（'＃审查形式）隐藏（）;
$（'＃审查形式响应）HTML（＆LT; H3风格=文本对齐：中心;！＆GT;谢谢，您的评论已提交＆LT; / H3＆gt;中）;
}，
错误：函数（jxhr，味精，ERR）{
$（'＃响应）追加。（'＆LT;李风格=颜色：红色＆GT;+味精+'＆LT; /李＆GT;'）;
}
}）;
}
}）;
正在结合新提交事件处理程序，在 submitHandler 插件的回调。该处理器将不会触发马上因为一个提交事件已经在进行中。
您不需要它。该 submitHandler 回调已经将 preventDefault 中内部插件code
删除此
$（＃审查形式）。递交（函数（事件）{}）
和保存所有code它直接包含在 submitHandler
由于您使用的连载（）的数据....你并不需要所有的单个字段变量创建为
I have a form in a modal, the user has to complete the form (otherwise validation will display the required fields error messages), then click the submit input type, it does nothing, then they click it again, then it will post via ajax, and return a "thank you" message.
I have looked around Stackoverflow and applied answers to the problem I am having but I still can't get it to work. I did remove the event.preventDefault(); from it, as well as $("#review-form").submit(function(event) { and the form submits like it should after clicking the submit input once, but it doesn't post to the database.
Below is the jQuery for #review-form
$("#review-form").validate({
submitHandler: function () {
$("#review-form").submit(function (event) {
var rating = $(this).find('input[name=rating]');
// var rating = $(this).find('input[name=rating]').val();
var review = $(this).find('textarea[name=review]');
var form_settings = $(this).find('input[name=form_settings]');
var xid = $(this).find('input[name=XID]');
var entry_id = $(this).find('input[name=entry_id]');
var entry_type = $(this).find('input[name=entry_type]');
var site_id = $(this).find('input[name=site_id]');
var first_name = $(this).find('input[name=first_name]');
var middle_initial = $(this).find('input[name=middle_initial]');
$.ajax({
url: $("#review-form").attr("action"), //your server side script
data: $(this).serialize(),
type: 'POST',
success: function (data) {
//$('#response').append('<li>' + data + '</li>');
$('#review-form').hide();
$('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>");
},
error: function (jxhr, msg, err) {
$('#response').append('<li style="color:red">' + msg + '</li>');
}
});
event.preventDefault();
});
}
});
UPDATE: I removed the $("#review-form").submit(function (event) { }); and I changed the $(this).find ... and retrieved by specifying the form's id of #form-review, then past thru the data parameter. I commented out all the individual variables and just passing $(this).serialize() into the data parameter and that did not work.
The below code works in chrome and firefox, but in firefox, it closes the modal and redirects to the domain's homepage, it should keep the modal open with a thank you msg, like it does in chrome:
$("#review-form").validate({
submitHandler: function() {
$.ajax({
url: $("#review-form").attr("action"), //your server side script
data: $("#review-form").serialize(),
type: 'POST',
success: function (data) {
$('#review-form').hide();
$('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>");
},
error: function (jxhr, msg, err) {
$('#response').append('<li style="color:red">' + msg + '</li>');
}
});
event.preventDefault();
}
});
Final working product:
$("#review-form").validate({
submitHandler: function() {
$.ajax({
url: $("#review-form").attr("action"),
data: $("#review-form").serialize(),
type: 'POST',
success: function (data) {
$('#review-form').hide();
$('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>");
},
error: function (jxhr, msg, err) {
$('#response').append('<li style="color:red">' + msg + '</li>');
}
});
}
});
You are binding a new submit event handler, within submitHandler callback of the plugin. This handler won't fire right away because a submit event is already in progress.
You don't need it. The submitHandler callback will already preventDefault internally within plugin code
Remove this
$("#review-form").submit(function(event) { })
and keep all the code it contains directly within submitHandler
Since you are using serialize() for the data.... you don't need all the individual field variables you create either
这篇关于JQuery验证需要点击提交两次提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
