如何在存在验证错误时使用Jquery Validator避免或禁用表单提交
如何在存在验证错误时使用Jquery Validator避免或禁用表单提交
提问于 2016-09-07 04:06:17
实际上，我在使用JQUERY Validator进行表单验证时遇到了问题。即使表单在字段中有验证错误，也会提交表单。我不确定当字段中有验证错误时，我们如何禁用或不允许提交表单？我相信bootstrap验证器会在出现验证错误时禁用该按钮。虽然在我的例子中我使用的是JQUERY验证器，但是表单正在被提交，并调用了一个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验证块下添加了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();
}
}
});
});回答 3
Stack Overflow用户
回答已采纳
发布于 2016-09-07 04:21:52
将submit按钮更改为type="submit"并删除on click处理程序。
如果你想通过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(); -在这个地方已经发生了验证。
EDIT:根据OP的提示--这里是如何用他的自定义AJAX调用编写的：
submitHandler: function (form) {
console.log("Submitted!");
doAjaxPost(); // custom AJAX call
}Stack Overflow用户
发布于 2016-09-07 04:23:32
我怀疑doAjaxPost()方法是在验证结果之外调用的。这个方法里面有什么？
你能识别出你使用的jquery验证插件(项目页面，文档页面...)吗？
Stack Overflow用户
发布于 2016-09-07 04:28:48
你可以这样做，只需添加以下选项：
$("#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
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39357020
复制相关文章
相似问题
腾讯云开发者
