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

Question

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>

jtalarico · Accepted Answer · 2021-08-20 11:04:26Z

1

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.

edited Aug 20, 2021 at 11:04

answered Aug 20, 2021 at 10:12

jtalarico

1,1161 gold badge10 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

whatever Over a year ago

OK, I have made a mistake when I have been trying many things, but your fiddle does not do thing I am looking for

jtalarico Over a year ago

I just made some edits. I'm using your logic so if that's not right, especially the regex test, I can't speak to what your intent is. But my code displays the text below the input field under certain conditions. If you type something then delete it all the text appears. Your code would never display text b/c it was trying to set .html() on an input field which is not valid.

jtalarico Over a year ago

Also, if you want to display the text "please enter your password" below the input field before someone starts typing, you need to put the logic in a function and call it when the page loads and then just call the function on keyup. The way it's written now, validation won't occur until typing starts.

whatever Over a year ago

I want to display it when input was deleted, and how would I do it for the confirm password

whatever Over a year ago

How would I do it for the conf password

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related