当使用 event.preventDefault 用于另一个条件时，如果条件通过，则不会触发按钮单击

Question

我想在登录按钮的 post 事件之前检查用户是否存在。我使用 event.preventDefault() 来停止默认行为。如果条件未通过，则会显示特定的错误消息。

问题是当条件通过时，没有触发登录按钮。

<form class="form " id="login-form" method="post" action="<?php print get_permalink(); ?>" id="loginform">
  <div class="block-input" id="lf_form_username_cont">
    <input id="id_username_login_form" class="input_style" value="" type="text" name="log" placeholder="<?php echo esc_attr( $userlogin ); ?>">
  </div>
  <div class="block-input password-input-box" id="lf_form_password_cont">
    <input class="input_style  password-input" id="id_password_login_form" type="password" name="pwd" placeholder="<?php echo esc_attr( $userpassword ); ?>">
  </div>
  <?php if (WPA_LOGIN_PRO) {
    login_form_pro::getHTMLCaptcha(true);
  }?>
  <div class="" id="lf_form_remember_cont">
    <input type="hidden" name="action" value="<?php echo esc_attr( $action_value );?>">
    <input type="checkbox" name="rememberme" value="forever">
    <label><?php echo __( 'Remember?', 'login-form' ); ?></label>
  </div>
  <div class="block-input">
    <input id="id_button_login_form" class="button button-primary button-large submit_style" type="submit" value="<?php echo esc_attr( $button ); ?>" name="btnsubmit">
  </div>
</form>

jQuery(document).ready(function() {
  jQuery("#id_button_login_form").click(function(event) {
    event.preventDefault();
    var valid = true;
    var email = jQuery('#id_username_login_form').val();
    jQuery.ajax({
      url: magodu.ajaxurl,
      type: "POST",
      data: {
        'action': 'check_useremail',
        user_email: email
      },
      dataType: "json",
      success: function(response) {
        if (response.status == "cannot") {
          valid = false;
          jQuery('.not-registered').css('display', 'inline-block');
        }
      }
    });
    if (valid) 
      jQuery("#id_button_login_form").click();
  });
});

拜托，有人可以帮我解决这个问题吗？

Answer 1

这里有两个问题。首先，异步逻辑存在问题，因为 valid 在 $.ajax 调用的异步回调中更新，因此它将 永远不会 成为 false.您需要触发事件以从该回调中提交表单。

其次，如果代码有效，您将陷入无限循环，因为您的按钮单击处理程序本身会引发另一次点击，然后处理并引发另一次点击，然后处理并...

为了解决这个问题，挂钩到 <form /> 元素的 submit 事件更具语义，然后直接在 HTMLFormElement 上引发 submit 事件，而不是 jQuery 目的。

综上所述，试试这个：

jQuery(function($) {
  $('#login-form').submit(function(e) {
    e.preventDefault();        
    var form = this;

    $.ajax({
      url: magodu.ajaxurl,
      type: "POST",
      data: {
        action: 'check_useremail',
        user_email: $('#id_username_login_form').val()
      },
      dataType: "json",
      success: function(response) {
        var valid = response.status !== "cannot";
        if (valid) {
          form.submit();
        } else {
          $('.not-registered').css('display', 'inline-block');
        }
      }
    });
  });
});

当使用 event.preventDefault 用于另一个条件时，如果条件通过，则不会触发按钮单击

button click not triggered if conditon passed when using event.preventDefault for another condition

wordpress

jquery

events

preventdefault