Getting a javascript function to reset

Question

I have a keyup function which checks the value of how many characters are inputted into a password field. It works for the most part, but if I delete the characters I cannot figure out how to get the image to reset back to its default state.

How can I do this?

 $('#register').keyup(function() { var password = $("#password").val(); if (password.length >= 6) { $("#characters").addClass('none'); hasError = true; } }); 

 .none { display: none; } #password-check { margin: 30px auto; } .password-check-field { color: black; } .password-check-field img { margin-right: 15px; height: 15px; width: 15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form action="" method="POST" id="register"> <div class="field"> <label for="firstname">First Name</label> <input type="text" name="firstname" required> </div> <div class="field"> <label for="password">Choose a password</label> <input type="password" name="password" id="password" required> </div> <div id="password-check"> <div class="password-check-field"> <img id="characters" src="icons/collection/delete.png" alt="Success">Your password has at least 6 characters</div> </div> <input type="hidden" name="token" value="<?php echo Token::generate(); ?>"> <label for="signinButton"> <input id="signinButton" name="submit" type="submit" value="Register"> </label> <br> </form> 

uPDATE

<div class="password-check-field">
    <img id="characters" src="icons/collection/delete.png" alt="Success">
    <img id="charactersOK" class="none" src="icons/collection/checkmark.png" alt="Success">
    Your password has at least 6 characters
</div>

$("#charactersOK").addClass("block");

Answer 1

You need to check the case when the password length is less than 6 characters and if so remove the none class. You can make this logic more succinct by using toggleClass() ;

Also note that your hasError variable seems backwards; surely it should only be true when password < 6 . Try this:

 $('#register').keyup(function() { var passwordLengthValid = $("#password").val().length >= 6; $("#characters").toggleClass('none', passwordLengthValid); var hasError = !passwordLengthValid; // Note that if you want to change image src instead of hide it, use this: $('#characters').attr('src', passwordLengthValid ? 'valid-image.jpg' : 'error-image.jpg'); }); 

 .none { display: none; } #password-check { margin: 30px auto; } .password-check-field { color: black; } .password-check-field img { margin-right: 15px; height: 15px; width: 15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form action="" method="POST" id="register"> <div class="field"> <label for="firstname">First Name</label> <input type="text" name="firstname" required> </div> <div class="field"> <label for="password">Choose a password</label> <input type="password" name="password" id="password" required> </div> <div id="password-check"> <div class="password-check-field"> <img id="characters" src="icons/collection/delete.png" alt="Success">Your password has at least 6 characters</div> </div> <input type="hidden" name="token" value="<?php echo Token::generate(); ?>"> <label for="signinButton"> <input id="signinButton" name="submit" type="submit" value="Register"> </label> <br> </form> 

Answer 2

Try this

if (password.length >= 6) {
  $("#characters").addClass('none');
  hasError = true;
} else {
  $("#characters").removeClass('none')
  hasError = false;
}

Answer 3

Add an else :

if(password.length >= 6) {
    $("#characters").addClass('none');
    hasError = true;
} else {
    $("#characters").removeClass('none');
    hasError = false;
}

Also, isn't you hasError backwards? If there are more than 6 characters, shouldn't there not be an error, so hasError should be false ?

Answer 4

You should remove the class if not needed.

$('#register').keyup(function() {
  var password = $("#password").val();
  if (password.length >= 6) {
    $("#characters").addClass('none');
    hasError = true;
  } else{
    $("#characters").removeClass('none');
    hasError = false;
  }
});

Answer 5

You could use toggleClass for this:

$('#register').keyup(function() {
  var password = $("#password").val();
  hasError = password.length >= 6; // make sure to set the correct error condition here
  $("#characters").toggleClass('none', hasError);
});