Question

如果使用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
        }
    });
});

更新：禁用按钮没有问题。问题是纠正错误后，再次禁用属性仍然存在！我做错了什么？

Answer 1

您没有从_checkForm(){}函数返回结果。您可以使用_validate，并将其传递给它，但不使用/传递_checkForm()的结果，因此验证：

if(!_checkForm()) {...}

始终为true，因为_checkForm不会返回任何内容（未定义）和!。此外，如果支票通过，您应return false打破提交。

Answer 2

你忘记了返回错误。

请试试这个：

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
        }
    });
});

Answer 3

<强> 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在表单输入中存在验证错误，则禁用提交按钮

3 个答案: