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

Question

I want to check if the user exists or not before post event of the login button. I used event.preventDefault() to stop the default behavior. If the condition is not passed then the specific error message is being displayed.

The issue is when the condition is passed, the Login button is not triggered.

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

Please, can someone help me with this?

Answer 1

You have two issues here. Firstly, you have an issue with the async logic, as valid is updated within the async callback form the $.ajax call, hence it will never be false. You need to trigger the event to submit the form from within that callback.

Secondly, if the code worked you'd end up in an infinite loop as your button click handler itself raises another click, which is then handled and raises another click, which is then handled and...

To fix this it's more semantic to hook to the submit event of the <form /> element, then raise a submit event directly on the HTMLFormElement, not a jQuery object.

With all that said, try this:

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');
        }
      }
    });
  });
});