Getting Image To Change When An Uppercase Letter Is Found In An Input

I am attempting to check if there is at least one uppercase letter in the password input and if so, change the default 'delete' image and change it to a checkmark image. Does anyon

Solution 1:

To check if a string contains an uppercase character you can use a Regular Expression, specifically [A-Z]. Also note that in your example you're checking the value of the #upperCase element, which is an image. I think that selector should be #password instead. Try this;

$('#register').keyup(function() {
  var upperCaseValid = $("#password").val().match(/[A-Z]/g);
  $('#upperCase').attr('src', upperCaseValid ? 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQlyqJ14HYP1WclpK9RkJWo8jIDBkhTW0GS31AxRkozAEA72ULhY89LIzk' : 'icons/collection/delete.png');
});

#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 class="password-check-field">
    <img id="upperCase" src="icons/collection/delete.png" alt="Success">Your password has at least 1 capital letter
  </div>
</form>

Solution 2:

Try use this (I used text instead of images):

$('#register').keyup(function() {
  var upperCaseValid = /[A-Z]/.test($('#password').val());
  $('#msg').text(upperCaseValid ? 'Password contains uppercase character(s)' : 'Password doesn\'t contain uppercase character(s)');
});

https://jsfiddle.net/bz2zLsbs/