Question

我编写了以下代码，但是在两种情况下都无法提交表单。

export default function wrappedComponent(a, b){
   return <fooRenderer a={a} b={b}/>
}

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

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

Answer 1

您正在submit处理程序中设置blur处理程序，这意味着在每次触发代码时都会设置一个新的处理程序。这不是条件执行，即使在该块之外调用submit也会触发。您可以在浏览器中检查绑定的侦听器，以检查一旦敲入该代码，侦听器在执行后仍保留。

您可以依靠验证容器的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>

即使功能为真，表单也不会提交

1 个答案: