Ajax提交之前的jQuery表单验证
Posted
技术标签:
【中文标题】Ajax提交之前的jQuery表单验证【英文标题】：jQuery Form Validation before Ajax submit 【发布时间】：2012-07-13 06:04:09 【问题描述】：javascript 位：
$(document).ready(function()
$('#form').submit(function(e)
e.preventDefault();
var $form = $(this);
// check if the input is valid
if(! $form.valid()) return false;
$.ajax(
type:'POST',
url:'add.php',
data:$('#form').serialize(),
success:function(response)
$("#answers").html(response);
);
)
);
HTML 位：
<input type="text" name="answer[1]" class="required" />
<input type="text" name="answer[2]" class="required" />
所以这是我尝试使用的代码。这个想法是在我使用 Ajax 发送表单之前验证我的所有输入。我现在已经尝试了很多版本，但每次我最终都会提交，即使表格没有完全填写。我所有的输入都是“必需的”类。谁能看到我做错了什么？
另外，我依赖于基于类的要求，因为我的输入名称是用 php 生成的，所以我永远无法确定我得到什么名称 [id] 或输入类型。
当我在“页面”中浏览问题时，我会显示/隐藏问题。
<input type="button" id="next" onClick="toggleVisibility('form3')" class="next-btn"/>
JS：
function toggleVisibility(newSection)
$(".section").not("#" + newSection).hide();
$("#" + newSection).show();
【问题讨论】：
提交后会发生什么？ 目前我只是回显所有 $key => $value 对，即使我只填写了 1/4 个问题，它们也会不断在我的屏幕上弹出。 我在最新版本的 jquery (v1.7.2) 中找不到beforeSubmit 作为 $.ajax 的有效选项。您可能想要使用最新版本的 jquery。也就是说，达林的回答是应该怎么做。也就是说，如果您不能按照他的建议进行操作，请将 beforeSubmit 的最后一行替换为 Fliespl 提供的代码。您需要检查.validate() 的返回值，然后继续或取消ajax 请求。
尝试 fliespl 行，但它仍然只是提交。更新了相关代码。
【参考方案1】：
您可以使用submitHandler 选项。基本上将 $.ajax 调用放在这个处理程序中，即用验证设置逻辑反转它。
$('#form').validate(
... your validation rules come here,
submitHandler: function(form)
$.ajax(
url: form.action,
type: form.method,
data: $(form).serialize(),
success: function(response)
$('#answers').html(response);
);
);
如果验证通过，jQuery.validate 插件将调用提交处理程序。
【讨论】：
但我仍然可以在验证之前序列化 #answers 或将其粘贴在 $.ajax 之前？#answers 是您的结果 div。如果您想将表单输入字段值与 AJAX 请求一起发送，请使用 .serialize() 方法，正如我的答案所示：data: $(form).serialize() => 在提交处理程序中。
您是否认为在用户浏览表单时将表单拆分为多个隐藏/显示的 div 是否可能与我无法让此代码正常工作有关？跨度>
一如既往地正确，+1
正确的目标²哈哈+1【参考方案2】：
首先您不需要显式添加classRules，因为jquery.validate 插件会自动检测到required。
所以你可以使用这个代码：
-
在表单提交时，您会阻止默认行为
如果表单无效，则停止执行。
如果有效则发送 ajax 请求。
$('#form').submit(function (e)
e.preventDefault();
var $form = $(this);
// check if the input is valid using a 'valid' property
if (!$form.valid) return false;
$.ajax(
type: 'POST',
url: 'add.php',
data: $('#form').serialize(),
success: function (response)
$('#answers').html(response);
,
);
);
【讨论】：
查看你的浏览器日志是否有错误，你用的是什么浏览器？ 我使用的是谷歌浏览器，但在那里找不到任何错误。将再次尝试使用此代码。 现在根本不会提交，这进入了 $(document).ready(function() 对吧？ 是的，它应该在文档就绪块中，您是否在表单中添加了 ID？，您的表单必须有<form id='form'>... <input type=submit value=submit></form>
现在我到了某个地方。我只有一个输入类型=“按钮”。它仍然只需要我的复选框。它忽略文本框和单选按钮。难道是因为它们被隐藏了？我隐藏了较旧的问题，只显示当前的“页面”【参考方案3】：
你可以试试：
if($("#form").validate())
return true;
else
return false;
【讨论】：
我确实更改了 display: none 在我的表单上，因为我将它分成几个“页面”。认为这可能会导致一些问题？【参考方案4】：> Required JS for jquery form validation
> ## jquery-1.7.1.min.js ##
> ## jquery.validate.min.js ##
> ## jquery.form.js ##
$("form#data").validate(
rules:
first:
required: true,
,
middle:
required: true,
,
image:
required: true,
,
,
messages:
first:
required: "Please enter first",
,
middle:
required: "Please enter middle",
,
image:
required: "Please Select logo",
,
,
submitHandler: function(form)
var formData = new FormData($("#image")[0]);
$(form).ajaxSubmit(
url:"action.php",
type:"post",
success: function(data,status)
alert(data);
);
);
【讨论】：
这个答案对于初学者来说解释得非常清楚......谢谢！但这是否也验证文件附件！怎么样！！ 是否需要jquery.form.js？【参考方案5】：
这个特定的例子只会检查输入，但你可以调整它，在你的 .ajax 函数中添加这样的东西：
beforeSend: function()
$empty = $('form#yourForm').find("input").filter(function()
return this.value === "";
);
if($empty.length)
alert('You must fill out all fields in order to submit a change');
return false;
else
return true;
;
,
【讨论】：
【参考方案6】：我认为带有 jquery 验证的 submitHandler 是很好的解决方案。请从此代码中获取想法。灵感来自@Darin Dimitrov
$('.calculate').validate(
submitHandler: function(form)
$.ajax(
url: 'response.php',
type: 'POST',
data: $(form).serialize(),
success: function(response)
$('#'+form.id+' .ht-response-data').html(response);
);
);
【讨论】：
【参考方案7】：我认为我首先验证表单，如果验证通过，我会发布 ajax 帖子。不要忘记在脚本末尾添加“return false”。
【讨论】：
【参考方案8】：function validateForm()
var a=document.forms["Form"]["firstname"].value;
var b=document.forms["Form"]["midname"].value;
var c=document.forms["Form"]["lastname"].value;
var d=document.forms["Form"]["tribe"].value;
if (a==null || a=="",b==null || b=="",c==null || c=="",d==null || d=="")
alert("Please Fill All Required Field");
return false;
else
$.ajax(
type: 'post',
url: 'add.php',
data: $('form').serialize(),
success: function ()
alert('Patient added');
document.getElementById("form").reset();
);
$(function ()
$('form').on('submit', function (e)
e.preventDefault();
validateForm();
);
);
【讨论】：
是这样做的 欢迎来到 Stack Overflow！一般来说，如果答案包含对代码的用途的解释，以及为什么在不介绍其他人的情况下解决了问题，那么答案会更有帮助。 为什么要使用比较运算符？我们不能使用 form.valid() 吗？这样会更有效率。【参考方案9】：您需要先触发表单验证，然后再检查它是否有效。在每个字段中输入数据后运行字段验证。表单验证由提交事件触发，但在文档级别。因此，您的事件处理程序在 jquery 验证整个表单之前被触发。不过不用担心，这一切都有一个简单的解决方案。
您应该验证表单：
if ($(this).validate().form())
// do ajax stuff
https://jqueryvalidation.org/Validator.form/#validator-form()
【讨论】：
【参考方案10】：$("#myformId").submit(function (event)
// submit modal form of create & edit
event.preventDefault();
formObj = $(this);
// check the form input is valid or not if not valid then return false;
if (!formObj.validate().form()) return false;
data = $(formObj).serializeArray();
// do stuff with ajax or anything else what you wants
);
说明：-首先验证表单，如果验证通过，则调用ajax请求，否则使用return false停止执行；
var validator = $( "#myform" ).validate(); 验证表单，如果有效则返回 true，否则返回 false。所以，我们只需要检查if (!formObj.validate().form())
更多详情see here documentation
我分享验证功能的自定义选项
$(function ()
$('form.needs-validation').each(function() // <- selects every <form> on page which contains .needs-validation class
var validator = $(this).validate(
errorElement: 'span',
errorPlacement: function (error, element)
error.addClass('invalid-feedback');
element.closest('.form-group').append(error);
,
highlight: function (element, errorClass, validClass)
$(element).addClass('is-invalid');
,
unhighlight: function (element, errorClass, validClass)
$(element).removeClass('is-invalid');
);
);
);
有关自定义 JQuery 验证的更多详细信息see here
对于自定义默认验证消息，请参阅下面对我非常有帮助的答案 URL
-
change default error message
How do I include the field label in a JQuery Validate error message
【讨论】：
【参考方案11】：表单原生 JavaScript checkValidity 函数足以触发 HTML5 验证
$(document).ready(function()
$('#urlSubmit').click(function()
if($('#urlForm')[0].checkValidity())
alert("form submitting");
);
);
【讨论】：
以上是关于Ajax提交之前的jQuery表单验证的主要内容，如果未能解决你的问题，请参考以下文章