提交带有onSubmit的表单
我的表单onSubmit正在调用：
onsubmit="validate(this); return false;"
validate(); 如下：
function validate(obj) { $.ajax({ url : "ajax/validate_check.php", type : "POST", data : $("#" + obj.id).serialize(), success : function(data) { $('#' + obj.id + ' :input.form_errors').removeClass('form_errors') data = $.parseJSON(data); if(data['error_count'] >= 1) { $.each(data, function(i, item) { $('#' + i).addClass('form_errors'); }); } else { $('#' + obj.id).submit(); } } }); }
当我有0错误时，它试图提交表单，但我得到一个无限循环。 我意识到它正在发生，因为我的onSubmit再次调用该函数。 我准备好后如何实际提交表格？
编辑：
我只是在寻找解决这个问题的最好方法。 我想validationonSubmit以便快速响应用户，然后我想以我知道数据传输方式的方式实际提交表单（例如register.php将注册用户）。 这就是为什么我没有做一个合并的动作/validation脚本，因为我不知道我提交的是哪种forms。 我可能需要重新排列我这样做的方式，所以任何帮助都会受到赞赏。
删除onsubmit="validate(this); return false;"
并使用以下function：
$('form').submit(function(e){ e.preventDefault(); var $form = $(this), $formId = $form.attr('id'), $formName = $form.attr('name'); $.ajax({ url : "ajax/validate_check.php", type : "POST", data : $("#" + $formId).serialize(), success : function(data) { $('#' + $formId + ' :input.form_errors').removeClass('form_errors') data = $.parseJSON(data); if(data['error_count'] >= 1) { $.each(data, function(i, item) { $('#' + i).addClass('form_errors'); }); } else { document.forms[$formName].submit(); } } }); });
您可以使用表单id或name进行测试的小提琴： http ： //jsfiddle.net/67rvg/3/
我不会在你的其他分支中发出另一个提交，但会返回一个真正的值。
在你的onsubmit中我会做onsubmit =“return validate（this）;”
不要使用提交调用再次submit它，正如您所说，您将处于循环中…只需将提交内容发布为：
改变你的$('#' + obj.id).submit(); 通过submitForm()并添加
function submitForm() { var form = $("#my_form"), url = form.attr("action"), dt = form.serialize(); $.post(url, dt, function(data) { // your form was post'd successfully }); }
既然你知道如何工作，为什么要发明井？
为什么不使用jQuery Validate和远程validation来为您完成这项工作？
这应该工作：在重新提交之前取消绑定事件。
代替
function validate(obj) { $.ajax({ url : "ajax/validate_check.php", type : "POST", data : $("#" + obj.id).serialize(), success : function(data) { $('#' + obj.id + ' :input.form_errors').removeClass('form_errors') data = $.parseJSON(data); if(data['error_count'] >= 1) { $.each(data, function(i, item) { $('#' + i).addClass('form_errors'); }); } else { $('#' + obj.id).submit(); } } }); }
尝试
function validate(obj) { $.ajax({ url : "ajax/validate_check.php", type : "POST", data : $("#" + obj.id).serialize(), success : function(data) { $('#' + obj.id + ' :input.form_errors').removeClass('form_errors') data = $.parseJSON(data); if(data['error_count'] >= 1) { $.each(data, function(i, item) { $('#' + i).addClass('form_errors'); }); } else { $('#' + obj.id).unbind('submit').submit(); } } }); }
在你的街区
} else { $('#' + obj.id).submit(); }
而不是做一个实际的表单提交使用另一个ajax调用将您的数据发送到您的表单操作端点：
} else { $.ajax({ url : obj.action ,type : obj.method ,data : $(obj).serialize() ,success : function() { // show success message/close window/ etc } , error: function() { // show error saving form message } }); }
这样，如果表单提交出现问题，您将能够更好地捕获结果。
- 不要使用onsubmit属性，它将JavaScript混合到html标记中，并且违背了最佳实践。
- 为什么不进行寄存器function（服务器端）的validation部分。 这样你就不会需要两倍的往返次数。 遵循最佳实践，您应该尽可能少地发出http请求。 您可以根据function将php脚本组织到文件夹中。 更容易分辨出提交的表格。 这样，为每个表单提交创建唯一的validation脚本也会容易得多。 您也可以使用REQUEST_URI服务器变量来告知您要提交的表单。
有关在php脚本中访问请求的REQUEST URI的说明，请参见此处。
如果您对提交的每个表单都进行了通用validation，则可以将其移动到单独的php文件中并将其导入到将使用该函数的所有文件中。 然后，该函数将在您导入其中的脚本中可用。
有关在php中包含文件的说明，请参阅此处。
然后，您可以为每个单独的脚本添加自定义validation。 有一天，您很可能需要对某些表单进行自定义validation。
- UTIL / validation_util.php
- AJAX /用户/ register.php
- AJAX /用户/ login.php中
- AJAX /用户/ logout.php
- AJAX /产品/ search.php中
- AJAX /产品/ detail.php
- AJAX /产品/ addToCart.php
-
等等…
$('#formId').on('submit', function (event) { event.preventDefault(); $.ajax({ url : "ajax/user/register.php", type : "POST", data : $(this).serialize(), success : function(data) { $('#' + obj.id + ' :input.form_errors').removeClass('form_errors') data = $.parseJSON(data); if(data['error_count'] >= 1) { $.each(data, function(i, item) { $('#' + i).addClass('form_errors'); }); } } }); });