Having trouble displaying text when input is empty(Client side validation jQuery)

user_14860984 0
Viewed 45

So I am having trouble with input validation, or I would say having trouble with displaying certain text below the input when input is empty.

As you can see in the code I tried checking if the value of an input is '' but it dint now work I tried other things as well but. I would be very grateful if someone shows me my beginner mistakes.

$("#newPasswordTextBox").on("keyup", function() {
    let pass = $("#newPasswordTextBox").val();
    if (pass.length == '') {
      $("#newPasswordTextBox").html("Please enter your password");
    }
    if ((pass.length >= 10) && (pass.length < 15)) {
      var regex = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[ `!#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~])/;

      if (!pass.match(regex)) {
        $("#newPasswordTextBox").css({
          "border-color": "red"
        })
      } else {
        $("#newPasswordTextBox").css({
          "border-color": "green"
        })
        $("#passwordCheck").html("Looks good");
        $("#passwordCheck").css({
          "color": "green"
        })
      }
    } else if (pass.length >= 15) {
      $("#newPasswordTextBox").css({
        "border-color": "green"
      })
    } else {
      $("#newPasswordTextBox").css({
        "border-color": "red"
      })
    }

    if (!this.pass) {
      $("#newPasswordTextBox").html("Please enter your password");
    }
  }

);

$("#confirmNewPasswordTextBox").on("keyup", function() {
  let pass = $("#confirmNewPasswordTextBox").val();
  let confpass = $("#newPasswordTextBox").val();

  if (pass === confpass) {
    $("#confirmNewPasswordTextBox").css({
      "border-color": "green"
    })
    $("#confirmPasswordCheck").html("Passwords are matching");
    $("#confirmPasswordCheck").css({
      "color": "green"
    })
  } else {
    $("#confirmNewPasswordTextBox").css({
      "border-color": "red"
    })
  }

  if (confpass.length == 0) {
    $("#confirmPasswordCheck").html("Please confirm your password");
    $("#confirmPasswordCheck").css({
      "color": "red"
    })
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="newPasswordTextBox">New Password</label>
  <input type="password" id="newPasswordTextBox" class="form-control" name="password" placeholder="New Password" autocomplete="off">
  <span id="passwordCheck"></span>
</div>
<div class="form-group">
  <label for="confirmNewPasswordTextBox">Confirm Password</label>
  <input type="password" id="confirmNewPasswordTextBox" class="form-control" name="confirmNewPassword" placeholder="Confirm New Password" autocomplete="off">
  <span id="confirmPasswordCheck"></span>
</div>

validation input jquery javascript regex
1 Answers

Take a look at this block of code:

if (!this.pass) {
  $("#newPasswordTextBox").html("Please enter your password");
}

You're trying to set the html of the password input field. That won't work. An input field can only have the value set. I'm assuming you're trying to set the html of a label or div below the input field. Change the id to that element's id and it works.

if (!this.pass) {
  $("#someDivOrLabel").html("Please enter your password");
}

See here: https://jsfiddle.net/efb0xc3z/

Oh, and I modified your logic a little. Your original code was testing:

if (pass.length == "") { ... }

This will never be true since length will be an integer. You can just use:

if (!pass) { ... }

...to test if the password is not blank since any value other than '' will evaluate to true.

I also added some CSS to remove the focus border on the input field because that can obscure the outline color.

user_838000
Related