如果使用jQuery的表单输入中存在验证错误，请禁用提交按钮
[英]disable submit button if there is validation errors in form inputs with jquery
问题描述
如果使用jquery从表单输入中出现验证错误，我想禁用“提交”按钮。 以下是我正在使用的代码：HTML：
<form action="/order" id="orderForm" class="orderform" autocomplete="off" method="post" accept-charset="utf-8">
<div class="orderform-inner">
<ol class="questions" id="questions">
<li>
<span><label for="oName">Please enter your name or the company name</label></span>
<input class="finput" id="oName" name="oName" type="text" maxlength="20"/>
<span class="input-error"></span>
</li>
</ol>
</div>
<button name="submit" class="submit" type="submit">Submit</button>
</form>
JS：
function _validate(input) {
if( input.val() === '' ) {
_showError(input, 'EMPTYSTR');
return false;
}
return true;
}
function _checkForm() {
$('#orderForm .finput').each(function(){
$(this).focusout(function() {
_validate($(this));
});
});
}
$(document).ready(function() {
_checkForm()
$('form#orderForm').submit(function(event) {
event.preventDefault(); // for ajax submission
if(!_checkForm()) {
$('button.submit').prop('disabled', true);
}
else {
// ajax post
}
});
});
更新：禁用按钮没有问题。 问题在于，纠正错误后，再次禁用的属性仍然存在！ 我究竟做错了什么？
3 个解决方案
解决方案1
1 2015-10-13 11:17:17
您不是从_checkForm(){}函数返回结果。 您可以通过_validate ，然后将其传递给它，但是您不使用/传递_checkForm()的结果，因此需要进行以下验证：
if(!_checkForm()) {...}
始终为true，因为_checkForm返回任何内容（未定义），而您的! -ing。 另外，如果检查通过，则应return false来中断提交。
解决方案2
0 2015-10-13 11:18:02
您忘记了返回false。
请尝试以下操作：
function _validate(input) {
if( input.val() === '' ) {
_showError(input, 'EMPTYSTR');
return false;
}
return true;
}
function _checkForm() {
$('#orderForm .finput').each(function(){
$(this).focusout(function() {
_validate($(this));
});
});
}
$(document).ready(function() {
$('form#orderForm').submit(function(event) {
event.preventDefault(); // for ajax submission
if(!_checkForm()) {
$('button.submit').prop('disabled', true);
return false;
}
else {
// ajax post
}
});
});
解决方案3
-1 2015-10-13 11:28:23
test1.html
function _validate(input) { if( input.val() === '' ) { _showError(input, 'EMPTYSTR'); return false; } return true; } function _checkForm() { $('#orderForm .finput').each(function(){ $(this).focusout(function() { _validate($(this)); }); }); } $(document).ready(function() { _checkForm(); $('form#orderForm').submit(function(event) { event.preventDefault(); // for ajax submission if(!_checkForm()) { $('button.submit').prop('disabled', true); } else { // ajax post } }); });
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> </head> <body> <form id="orderForm"> <input class="finput"> <button class="submit">submit</button> </form> <script type="text/javascript" src="test1.js"></script> </body> </html>
jQuery的表单验证与提交按钮
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.