Question

我想在登录按钮发布事件之前检查用户是否存在。我使用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。您需要触发事件以从该回调中提交表单。

第二，如果代码正常工作，那么您的按钮单击处理程序本身将引发另一个单击，然后处理并引发另一个单击，然后处理并...。

要解决此问题，从语义上讲，应该挂接到submit元素的<form />事件，然后直接在HTMLFormElement而不是jQuery对象上引发submit事件。

话虽如此，请尝试以下操作：

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用于其他条件时通过了条件，则不会触发按钮单击

1 个答案: