[英]disable submit button if there is validation errors in form inputs with jquery
I want to disable submit button if there is a validation error from form inputs using jquery. 如果使用jquery从表单输入中出现验证错误,我想禁用“提交”按钮。 The following is code that I am using: HTML: 以下是我正在使用的代码: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: 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
}
});
});
Update: There is no problem with disabling button. 更新:禁用按钮没有问题。 The problem is that after correcting errors, again the disabled attribute remains! 问题在于,纠正错误后,再次禁用的属性仍然存在! What am I doing wrong? 我究竟做错了什么?
You are not returning a result from the _checkForm(){}
function. 您不是从_checkForm(){}
函数返回结果。 You do from the _validate
one, and pass it to it, but you don't use/pass the result from _checkForm()
, therefore this validation: 您可以通过_validate
,然后将其传递给它,但是您不使用/传递_checkForm()
的结果,因此需要进行以下验证:
if(!_checkForm()) {...}
is always true, because _checkForm
returns nothing(undefined) and your !
始终为true,因为_checkForm
返回任何内容(未定义),而您的!
-ing it. -ing。 Also, if the check passes, you should return false
to break the submit. 另外,如果检查通过,则应return false
来中断提交。
You forget the return false. 您忘记了返回false。
please try this: 请尝试以下操作:
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
}
});
});
test1.html 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.