Check if has class not working

Question

very silly problem but cant seem to get it. i have submit button on form disabled by default. and want to enable if none of the inputs have materialize class invalid or they are empty, works with empty but cant figure out why the check for invalid not working $(this).is( ".invalid" ) code below:

$(document).ready(function() {
$('input').keyup(function() {

    var empty = false;

    $('input').each(function() {
        if (($(this).val().length == 0) || $(this).is( ".invalid" )) {
            empty = true;
        }
    });
    var submitBtn = $('.btn[type="submit"]');
    if (empty) {
        submitBtn.attr('disabled', 'disabled');
    } else {
        submitBtn.attr('disabled', false);
    }
});
});  


 <div class="container">   
    <div class="row">
        <div class="col s12 ">
            <div id="main" class="card">
                <div class="card-content deep-orange lighten-5">
                        <span class="card-title">Ajax Form</span>
                    <form action="submit">
                        <div class="row">
                            <div class="input-field col s6">
                                <input id="first_name" type="text" class="validate">
                                <label for="first_name">First Name</label>
                            </div>
                            <div class="input-field col s6">
                                <input id="last_name" type="text" class="validate">
                                <label for="last_name">Last Name</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s6">
                                <input id="email" type="email" class="validate">
                                <label for="email">Email</label>
                            </div>
                            <div class="input-field col s6">
                                <input id="phone" type="text" class="validate">
                                <label for="phone">Input</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <input id="age_input" type="number" class="validate">
                                <label for="age_input">Age</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <input id="noyp_input" type="number" class="validate">
                                <label for="noyp_input">Number</label>
                            </div>
                        </div>
                        <button class="btn waves-effect waves-light" type="submit" name="action" disabled="disabled">Submit
                            <i class="material-icons right">send</i>
                        </button>
                    </form>  
                </div>    
            </div>    
        </div>
    </div>
</div>

`$('input').keyup(` ? What input keyup? Any HTML to show? Or a [mcve] — Roko C. Buljan, Feb 09 '18 at 00:49
You should be using `prop`, not `attr` https://stackoverflow.com/questions/13831601/disabling-and-enabling-a-html-input-button — epascarello, Feb 09 '18 at 00:51
what you mean it runs code that enables, could you be more specific please — user9117670, Feb 09 '18 at 01:01
Check out my [answer](https://stackoverflow.com/questions/48697104/check-if-has-class-not-working/48697287#48697287) @user9117670 for a detailed solution. — Angel Politis, Feb 10 '18 at 04:36

Angel Politis · Answer 1 · 2018-02-09T01:42:53.667

I have three suggestions to make and a warning to give regarding your code:

Prefer prop to attr (see this answer).
Break the loop once the flag has been set to true; there is no need to search anymore.
Simply pass the result of the empty flag to the disabled property.
Beware that the content of an input can change via copy-paste, drag-n-drop or through the console and keyboard events such as keyup don't detect such changes.

Code:

/* ----- JavaScript ----- */
$(document).ready(function() {
  $('input').keyup(function() {
    /* Create a flag. */
    var empty = false;
    
    /* If any input is empty or invalid set the flag to true and break. */
    $('input').each(function() {
      if (!this.value.length || $(this).is(".invalid")) {
        empty = true;
        return false;
      }
    });

    /* Set 'disabled' to the value of the flag. */
    $('.btn[type="submit"]').prop("disabled", empty);
  });
});

/* For the other buttons. */
$("#add").click(()=>$('input').addClass("invalid"));
$("#remove").click(()=>$('input').removeClass("invalid"));

<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <input type="text"/>
  <input type="text"/>
  <input type="text"/>
</div>

<div>
  <button id = "add">Add 'invalid'</button>
  <button id = "remove">Remove 'invalid'</button>
  <button class="btn" type="submit" disabled>Submit</button>
</div>

score -1 · Answer 2 · answered Feb 09 '18 at 01:29

Better use input event instead of keyup as user can paste the value. Uncomment input class="invalid" in the snippet to test that case.

$(function() {

  $('input').on('input', function() {
    $('.btn[type="submit"]').prop('disabled',
      $.grep($('input'), function(i) {
        return i.value === '' || $(i).hasClass('invalid')
      }).length > 0)
  });

  $('form').on('submit', function(e) {
    e.preventDefault;
    alert('submit')
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input><br>
  <input><br>
  <!-- input class="invalid"><br -->
  <input><br>
  <button class="btn" type="submit" disabled>GO</button>
</form>

Check if has class not working

2 Answers2