使用 Jquery Validator 出现验证错误时如何避免或禁用表单提交
Posted
技术标签:
【中文标题】使用 Jquery Validator 出现验证错误时如何避免或禁用表单提交【英文标题】：How to avoid or disable form submission when there are validation errors using Jquery Validator 【发布时间】：2017-01-14 09:13:30 【问题描述】：实际上，我在使用 JQUERY Validator 进行表单验证时遇到了问题。即使表单在字段上存在验证错误，它也会被提交。我不确定当字段上出现验证错误时，我们如何禁用或不允许提交表单？我相信当出现验证错误时，引导验证器会禁用该按钮。虽然在我的情况下我使用的是 JQUERY VALIDATOR，所以表单正在提交并调用我在提交时调用的 ajax 调用。请帮忙！
form id="myform" class="form-horizontal" role="form" action="processAccount" method="post">
<h2><b style="color:#1E90FF;">Account</b></h2>
<div class="form-group">
<label for="Account Number" class="col-sm-3 control-label">Account Number</label>
<div class="col-sm-9">
<input type="text" id="accountNumber" name="accountNumber" placeholder="Account Number" class="form-control" autofocus required />
<!--<span class="help-block">Last Name, First Name, eg.: Smith, Harry</span>-->
</div>
</div>
<div class="form-group">
<label for="Company Number" class="col-sm-3 control-label">Company Number</label>
<div class="col-sm-9">
<input type="number" min="1" id="companyNumber" name="companyNumber" placeholder="Company Number" class="form-control" value=$companyNumber required />
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-offset-3">
<!-- <button type="submit" class="btn btn-info btn-block" onclick="doAjaxPost()">Search</button>
-->
<input type="button" style=" font-size: 18px;font-weight: bold; font-family: cursive;" id="processbutton" class="btn btn-info btn-block" value="Load" onclick="doAjaxPost()">
<div id="info" style="color: green; font-weight: bold;" font-size:380%;></div>
<%-- <p ><strong>$message</strong></p>
--%>
</div>
</div>
</form> <!-- /form -->
<script>
$(document).ready(function ()
$('#myform').validate( // initialize the plugin
rules:
accountNumber:
required: true,
minlength: 7,
maxlength: 7,
digits: true
,
companyNumber:
required: true,
digits: true
,
submitHandler: function (form)
console.log("Submitted!");
form.submit();
);
);
</script>
<script type="text/javascript">
function doAjaxPost()
// get the form values
var accountNumber = $('#accountNumber').val();
var companyNumber = $('#companyNumber').val();
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
var num = 1;
$.ajax(
type: "POST",
url: "./processAccount",
cache: false,
data: "accountNumber=" + accountNumber + "&companyNumber=" + companyNumber,
beforeSend: function(xhr)
xhr.setRequestHeader(header, token);
,
success: function(response)
// we have the response
$('#info').html(response);
$('#accountNumber').val('');
if(companyNumber!=1)
$('#companyNumber').val(num);
,
error: function(e)
alert('Error While Request: ' + e);
);
</script>
在 JQUERY Validation 块下添加了 SubmitHandler 方法，但是由于不支持请求方法 'POST' 而出现错误
submitHandler: function (form)
console.log("Submitted!");
// get the form values
var accountNumber = $('#accountNumber').val();
var companyNumber = $('#companyNumber').val();
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
var num = 1;
$.ajax(
type: "POST",
url: "./processAccount",
dataType: "json",
contentType: 'application/json',
cache: false,
data: "accountNumber=" + accountNumber + "&companyNumber=" + companyNumber,
beforeSend: function(xhr)
xhr.setRequestHeader(header, token);
,
success: function(response)
// we have the response
$('#info').html(response);
$('#accountNumber').val('');
if(companyNumber!=1)
$('#companyNumber').val(num);
,
error: function(e)
alert('Error While Request: ' + e);
);
form.submit();
);
);
【问题讨论】：
您的代码格式不正确？？ 【参考方案1】：将提交按钮更改为type="submit" 并删除点击处理程序。
如果您想通过 AJAX 发送它，您仍然可以在 submitHandler 回调中执行此操作。
说明：将您的点击处理程序设置为doAjaxPost()，您可能会绕过您的验证并且submitHandler 代码永远不会执行。
此外，您还有另一个错误。 submitHandler 应该是 rules 的兄弟姐妹，而不是孩子！它不会以您使用它的方式被调用。像这样使用它：
$('#myform').validate( // initialize the plugin
submitHandler: function (form)
console.log("Submitted!");
form.submit(); // default form submitting
,
rules:
accountNumber:
required: true,
minlength: 7,
maxlength: 7,
digits: true
,
companyNumber:
required: true,
digits: true
);
另请参阅 API 文档https://jqueryvalidation.org/documentation/
对于通过 AJAX 发送它，您应该能够调用您的 doAjaxPost() 而不是 form.submit(); - 在这个地方已经进行了验证。
编辑：正如 OP 所希望的那样——这里如何用他的自定义 AJAX 调用来编写它：
submitHandler: function (form)
console.log("Submitted!");
doAjaxPost(); // custom AJAX call
【讨论】：
所以你的意思是在 submitHandler 中调用 doAjaxPost() 函数？ submitHandler: function (form) console.log("Submitted!"); doAjaxPost(); form.submit(); 这听起来不是个好主意。你能发布你的 doAjaxPost 吗？ 当然..我刚刚在上面发布了 doAjaxPost() 我用我发现的另一个错误以及如何处理通过 AJAX 的发送来扩展我的答案 感谢迈克的建议。我尝试在验证块下的提交处理程序函数中添加 ajax 代码，我收到以下错误消息 Request method 'POST' not supported I have upload the code sn-p above【参考方案2】：我怀疑除了验证结果之外还调用了 doAjaxPost() 方法。这个方法里面有什么？
您能否识别您使用的 jquery validate 插件（项目页面、文档页面...）？
【讨论】：
我正在进行后端调用以根据数据库验证数据 您可以在调用之前在 doAjaxPost() 方法中处理验证结果。如果返回 true 取消 ajax 请求，则使用 .valid()。 @I'm Blue Da Ba Dee 发布的解决方案也应该可以完成这项工作。 还有一件事：如果您要针对 db 进行验证，请将其作为验证的一部分：***.com/questions/19539115/…【参考方案3】：你可以这样做，只需添加这个选项：
$("#myform").validate(
success: function()
$("button[type='submit']").prop("disabled",false);//enable your submit if success
,
invalidHandler: function()
$("button[type='submit']").prop("disabled",true); // disable your submit if there is any errors
return false; //Disable post
);
更多信息 https://jqueryvalidation.org/validate/
【讨论】：
以上是关于使用 Jquery Validator 出现验证错误时如何避免或禁用表单提交的主要内容，如果未能解决你的问题，请参考以下文章
jQuery 验证： $.data($('form')[0], 'validator').settings 返回未定义