Why javascript IF/ELSE doesn't work properly?

Question

I'm new to JavaScript and I want to make username validation on registration form. I don't know what's wrong on my code but I think I have a problem with "IF ELSE" statement.

$(document).ready(function() {
  $("#usernameErrorMsg").hide();
  var usernameLength = $("#username").length;
  $("#username").focusout(function() {
    checkUser();
  });
  function checkUser() {
    if (usernameLength < 5 || usernameLength > 20) {
      $("#usernameErrorMsg").show();
    } else {
      $("#usernameErrorMsg").hide();
    }
  }
});

I expected that when I input more than 5 char until 20 char, the usernameErrorMsg will disappear. The actual result, no matter how many characters that I have input, the error message keeps coming up.

Matt Ball · Accepted Answer · 2019-05-06 20:26:30Z

3

usernameLength is being computed only once, before checkUser() ever runs. You should re-calculate its value inside the callback each time; otherwise, changes to that value will not be visible inside the callback.

Furthermore, if you want to check the length of the test in the input, you need to check $("#username").val().length, not $("#username").length:

function checkUser(){
  var usernameLength = $("#username").val().length;
  if (usernameLength < 5 || usernameLength > 20){
    $("#usernameErrorMsg").show();
  } else {
    $("#usernameErrorMsg").hide();
  }
}

edited May 6, 2019 at 20:26

answered May 6, 2019 at 20:22

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

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

2 Comments

Alexey Zelenin Over a year ago

I'd just use const here instead of var - this value probably will never be changed

Matt Ball Over a year ago

@AmericanUmlaut I've not tested the code myself; the question lacks an SSCCE to compare against.

Scott Marcus · Accepted Answer · 2019-05-06 20:34:03Z

$("#username").length is not the length of the characters in the field. It's the amount of elements in the JQuery wrapped set returned from your query. Since only one element will have an id of username, the length is always 1 and your if condition will always be true.

What you'll have to do is get the length of the value in the field:

$("#username").val().length

You'll also want to move the line that gets the value into the focusout event handler so that you are always working with the most current data.

Lastly, it doesn't make much sense to have a function do nothing but call another function, so you can combine the checkUser function with the event callback and simplify the code.

$(document).ready(function() {
  $("#usernameErrorMsg").hide();  
 
  var username = $("#username");        // Find the element just once
  
  $("#username").focusout(function() {
    // Each time the user leaves the field, get the current
    // amount of characters in the input field
    var usernameLength = username.val().length;
  
    // See the difference between the length of the JQuery query and 
    // the length of the value of the first element in the results?
    console.log(username.length, usernameLength);
    
    if (usernameLength < 5 || usernameLength > 20) {
      $("#usernameErrorMsg").show();
    } else {
      $("#usernameErrorMsg").hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Enter your name: <input id="username">
<span id="usernameErrorMsg">ERROR</span>

ShivCK · Accepted Answer · 2019-05-06 20:34:27Z

0

You need to get the length of input everytime the function checks it.

Currently you calculate the length only once.

$(document).ready(function(){

$("#usernameErrorMsg").hide();

  $("#username").focusout(function(){
    checkUser();
  });

  function checkUser(){
   //calculate the length everytime in the function
    var usernameLength = $("#username").val().length;

    if(usernameLength < 5 || usernameLength > 20){
      $("#usernameErrorMsg").show();
    }
    else{
      $("#usernameErrorMsg").hide();
    }
  }

edited May 6, 2019 at 20:34

answered May 6, 2019 at 20:27

ShivCK

67911 silver badges17 bronze badges

Comments

danny bee · Accepted Answer · 2019-05-06 23:20:23Z

-2

try this

$(document).ready(function(){

$("#usernameErrorMsg").hide();

  $("#username").focusout(function(){
    checkUser();
  });

  function checkUser(){
    usernameLength = $("#username").length;
    if(usernameLength < 5 || usernameLength > 20){
      $("#usernameErrorMsg").show();
    }
    else{
      $("#usernameErrorMsg").hide();
    }
  }

});

edited May 6, 2019 at 23:20

danny bee

8706 silver badges19 bronze badges

answered May 6, 2019 at 20:23

Alexey Zelenin

7204 silver badges11 bronze badges

1 Comment

AmericanUmlaut Over a year ago

This answer could be improved by adding an explanation of why it works, and addressing the problem that $("#username").length does not actually return the length of the user name.

Collectives™ on Stack Overflow

Why javascript IF/ELSE doesn't work properly?

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related