javascript - 即使函数为真，表单也不提交

Question

我编写了以下代码，但在这两种情况下都阻止了表单提交。

$(document).ready(function() {
  $('#password_result_success').hide();
  $('#password_result_error').hide();
  $('#current_password_blank').hide();
  $('#confirm_new_password').blur(function(event) {
    data = $('#current_password').val();
    var len = data.length;
    if (len < 1) {
      //alert("Password cannot be blank");
      $('#current_password_blank').show();
      // Prevent form submission
      //event.preventDefault();
      $('form#form_change_password').submit(function(e) {
        e.preventDefault();
      });
    } else {
      $('#current_password_blank').hide();
    }

    if ($('#new_password').val() != $('#confirm_new_password').val()) {
      //alert("Password and Confirm Password don't match");
      //$('#password_result').html('<i class="fa fa-exclamation-circle"></i>');
      $('#password_result_success').hide();
      $('#password_result_error').show();
      // Prevent form submission
      $('form#form_change_password').submit(function(e) {
        e.preventDefault();
      });
    } else {
      $('#password_result_error').hide();
      $('#password_result_success').show();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<hr>
<div class="container text-center">
  <h1>change password</h1>
  <form action="post.php" id="form_change_password">
    <div class="form-group">

      <input type="password" class="form-control" id="current_password" placeholder="current password">
    </div>
    <div id="current_password_blank" class="alert-danger"><i class="fa fa-exclamation-circle"></i>current password can't be blank </div>
    <div class="form-group">
      <label for="new_password">new password</label>
      <input type="password" class="form-control" id="new_password" placeholder="New Password">
    </div>
    <div class="form-group">
      <label for="confirm_new_password">confirm new password</label>
      <input type="password" class="form-control" id="confirm_new_password" placeholder="Confirm New Password">
    </div>
    <div id="password_result_success" class="alert-success"><i class="fa fa-check"></i>&nbsp;password match</div>
    <div id="password_result_error" class="alert-danger"><i class="fa fa-exclamation-circle"></i>&nbsp;password do not match</div>
    <div class="text-center">
      <button type="submit" id="change_password" class="btn btn-default">Change Password</button>
    </div>
  </form>
</div>

我将在 PHP 中进行完整的验证，但我想先通过 jQuery 检查，然后再对 PHP 验证进行 AJAX 调用。问题是我的脚本阻止了表单提交，即使它返回 true。

Answer 1

您正在您的blur 处理程序中设置您的submit 处理程序，这意味着任何时候该代码被触发都会设置一个新的处理程序。这不是条件执行，即使在该 block 外调用 submit 时也会触发。您可以在浏览器中检查绑定(bind)的监听器，以检查一旦您点击该代码，监听器是否在执行后仍然存在。

您可以信赖 visibility您的验证容器，以确定您是否应该阻止提交。您还可以使用其他技术，例如将 has-error 类添加到您的表单或 data-* 属性，但想法保持不变。

$(document).ready(function() {
  // Cache selectors to make them a bit shorter and more performant
  $pwd_success = $('#password_result_success').hide();
  $pwd_error = $('#password_result_error').hide();
  $pwd_blank = $('#current_password_blank').hide();

  $('#confirm_new_password').blur(function(event) {
    data = $('#current_password').val();
    var len = data.length;
    if (len < 1) {
      //alert("Password cannot be blank");
      $pwd_blank.show();
    } else {
      $pwd_blank.hide();
    }
    if ($('#new_password').val() != $('#confirm_new_password').val()) {
      $pwd_success.hide();
      $pwd_error.show();
    } else {
      $pwd_error.hide();
      $pwd_success.show();
    }
  });

  // Attach listener globally (and only once)
  $('form#form_change_password').submit(function(e) {
    if ($pwd_blank.is(':visible') || $pwd_error.is(':visible')) {
      // Prevent submission if there's an error
      e.preventDefault();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<hr>
<div class="container text-center">
  <h1>change password</h1>
  <form action="post.php" id="form_change_password">
    <div class="form-group">

      <input type="password" class="form-control" id="current_password" placeholder="current password">
    </div>
    <div id="current_password_blank" class="alert-danger"><i class="fa fa-exclamation-circle"></i>current password can't be blank </div>
    <div class="form-group">
      <label for="new_password">new password</label>
      <input type="password" class="form-control" id="new_password" placeholder="New Password">
    </div>
    <div class="form-group">
      <label for="confirm_new_password">confirm new password</label>
      <input type="password" class="form-control" id="confirm_new_password" placeholder="Confirm New Password">
    </div>
    <div id="password_result_success" class="alert-success"><i class="fa fa-check"></i>&nbsp;password match</div>
    <div id="password_result_error" class="alert-danger"><i class="fa fa-exclamation-circle"></i>&nbsp;password do not match</div>
    <div class="text-center">
      <button type="submit" id="change_password" class="btn btn-default">Change Password</button>
    </div>
  </form>
</div>