1

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

$(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 也会阻止表单提交。

4

1 回答 1

2

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

您可以依靠验证容器的可见性来确定是否应该阻止提交。您还可以使用其他技术，例如向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>

于 2019-07-15T18:37:31.203 回答