CODEWITHSUNDEEP
javascriptjquerycss
Paul
Paul

Reputation: 3368

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 anyone see what I am doing wrong?

$('#register').keyup(function() {
  var upperCase = $("#upperCase").val();
  var upperCaseValid = upperCase.toUpperCase().length >= 1;
  /*if (upperCaseValid == upperCaseValid.toUpperCase()) {
			$('#upperCase').attr('src', 'icons/collection/checkmark.png');
		}*/
  $('#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>

Upvotes: 1

Views: 123

Answers (2)

Krzysztof Kaźmierczak
Krzysztof Kaźmierczak

Reputation: 1434

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/

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337627

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>

Upvotes: 1

Related Questions