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-fieldimg {
  margin-right: 15px;
  height: 15px;
  width: 15px;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><formaction=""method="POST"id="register"><divclass="field"><labelfor="firstname">First Name</label><inputtype="text"name="firstname"required></div><divclass="field"><labelfor="password">Choose a password</label><inputtype="password"name="password"id="password"required></div><divclass="password-check-field"><imgid="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/