javascript - jQuery on click not performing actions as expected

Question

I've faced a very weird issue today. I'm using below HTML code for a login form and I am using below JS to make sure that it performs operations as expected.

$('body').on('click', '.account__login-form-button', function() {
  $('form#login input').each(function() {
    if (isBlank($(this).val())) {
      proceed = false;
      toastr.error('Login credentials cannot be left blank.', 'Please Enter Login Details!', {
        closeButton: !0,
        showMethod: 'slideDown',
        hideMethod: 'slideUp',
        preventDuplicates: true,
        positionClass: 'toast-bottom-right'
      });
    } else
      proceed = true;
  });

  if (proceed) {
    var buttonText = $('.account__login-form-button').text();
    var username = $('.account__login-form-username').val();
    var password = $('.account__login-form-password').val();

    $('[class^=account__login-form-]').attr('disabled', true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="login">
  <div class="form-group text-center text-success col-md-offset-4 col-md-4" style="cursor: pointer;">
    <span id="create_account">
      Don't have an account? Click here to create one!
    </span>
  </div>
  <div class="form-group col-md-offset-4 col-md-4">
    <input type="text" class="form-control account__login-form-username" name="account_login" placeholder="Username / Mobile / Email-ID">
  </div>
  <div class="form-group col-md-offset-4 col-md-4">
    <input type="password" class="form-control account__login-form-password" name="account_login" placeholder="Enter Password">
    <div class="pull-right" style="cursor: pointer;">
      <span id="for-pass" name="account_login">
        Forgot password?
      </span>
    </div>
    <div class="clearfix"></div>
  </div>
  <div class="form-group col-md-offset-4 col-md-4">
    <button name="account_login" class="btn btn-block btn-primary account__login-form-button">Login Now!</button>
  </div>
</div>

question from:https://stackoverflow.com/questions/65943126/jquery-on-click-not-performing-actions-as-expected

Answer 1

A couple tiny mistakes...

1. There is no <form> element in your HTML. You only have a Bootstrap .form-group class used.
2. You should declare the proceed variable before the .each() loop.
3. After the loop, test the proceed value... Not inside.
4. To disable the inputs, use the *= (contains) operator instead of ^= (starts with)... Because the account__login-form-___ class is not always the first class in the class attribute.

And I changed the condition to test if an input is empty... isBlank() seems to be an excel function... Unless you coded it yourself.

$('body').on('click', '.account__login-form-button', function() {

  // Add this here
  var proceed = true

  // There is no <form> element in your HTML.
  $('#login input').each(function() {

    if ($(this).val().trim() === "") {
      proceed = false;
      toastr.error('Login credentials cannot be left blank.', 'Please Enter Login Details!', {
        closeButton: !0,
        showMethod: 'slideDown',
        hideMethod: 'slideUp',
        preventDuplicates: true,
        positionClass: 'toast-bottom-right'
      });
    }
  });  // END each loop
  
  // AFTER the each loop, test the "proceed" value
  console.log("proceed", proceed)

    if (proceed) {
      var buttonText = $('.account__login-form-button').text();
      var username = $('.account__login-form-username').val();
      var password = $('.account__login-form-password').val();
      
      console.log(buttonText, username, password)

      $('[class*=account__login-form-]').attr('disabled', true);
      console.log("inputs are now disabled")
    }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>

<div id="login">
  <div class="form-group text-center text-success col-md-offset-4 col-md-4" style="cursor: pointer;">
    <span id="create_account">
                Don't have an account? Click here to create one!
            </span>
  </div>
  <div class="form-group col-md-offset-4 col-md-4">
    <input type="text" class="form-control account__login-form-username" name="account_login" placeholder="Username / Mobile / Email-ID">
  </div>
  <div class="form-group col-md-offset-4 col-md-4">
    <input type="password" class="form-control account__login-form-password" name="account_login" placeholder="Enter Password">
    <div class="pull-right" style="cursor: pointer;">
      <span id="for-pass" name="account_login">
                    Forgot password?
                </span>
    </div>
    <div class="clearfix"></div>
  </div>
  <div class="form-group col-md-offset-4 col-md-4">
    <button name="account_login" class="btn btn-block btn-primary account__login-form-button">Login Now!</button>
  </div>
</div>