javascript If Variable(s) is True

Question

I'm not sure if I'm misunderstanding how True/False works in Javascript or not. In my Jquery script below I'm declaring 6 variables as false. If the regex validation conditions are good, then I redeclare the variable(s) to true. On the bottom is a simple alert() to tell me when all variables are true.

The validation conditions are working (removing/adding classes), but the alert does not show up. That's why I'm not sure if I'm messing up the true/false part or not.

$('#password1').keyup(function() {
var checkLength = false;
var checkLetter = false;
var checkCaps = false;
var checkNum = false;
var checkSymbol = false;
var checkSpace = false;

var pswd = $(this).val();


//validate the length
if(pswd.length < 6 ){ 
 $('#length').removeClass('valid').addClass('invalid'); 
}else{ 
 $('#length').removeClass('invalid').addClass('valid'); 
 checkLength = true; 
}

//validate letter
if(pswd.match(/[A-Za-z]/)){ 
 $('#letter').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#letter').removeClass('valid').addClass('invalid'); 
 checkLetter = true; 
}

//validate capital letter
if(pswd.match(/[A-Z]/)){ 
 $('#capital').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#capital').removeClass('valid').addClass('invalid'); 
 checkCaps = true; 
}

//validate number
if(pswd.match(/\d/)){ 
 $('#number').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#number').removeClass('valid').addClass('invalid'); 
 checkNum = true; 
}   

//validate symbols
if(pswd.match(/[^a-zA-Z0-9]/)){ 
 $('#symbol').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#symbol').removeClass('valid').addClass('invalid'); 
 checkSymbol = true; 
}   

//validate no spaces
if(pswd.match(/\s/)){ 
 $('#spaces').removeClass('valid').addClass('invalid'); 
}else{ 
 $('#spaces').removeClass('invalid').addClass('valid'); 
 checkSpace = true; 
}

// here is where I'm concerned I'm wrong
if(checkLength == true && checkLetter == true && checkCaps == true && checkNum == true && checkSymbol == true && checkSpace == true){ 
    alert("All good"); 
}

});

Would someone double check me?

Answer 1

At first, there is no need to write checkLength == true, checkLength is enough since they are all boolean variables.

Second, in some of your conditions you assign class invalid but set the var to true, while in others you do it vice versa. Every check... = true should be in the same branch with class = valid. Also, personally, I would adapt the validity conditions, to have all positive events either in the if or in the else branch, but not mixed like you do at the moment. Lastly, I always try to avoid duplicate code. There are a lot of places you could refactor, but you could start easy with setting the classes in a separate function.

See it working in this fiddle.

$('#password1').keyup(function() {
  var checkLength = false;
  var checkLetter = false;
  var checkCaps = false;
  var checkNum = false;
  var checkSymbol = false;
  var checkSpace = false;

  var pswd = $(this).val();


  //validate the length
  // reverse the condition, to have the valid state in the if branch as well
  if(pswd.length >= 6 ){ 
   setValid('#length'); 
   checkLength = true; 
  }else{ 
   setInvalid('#length');  
  }

  //validate letter
  if(pswd.match(/[A-Za-z]/)){
   setValid('#letter'); 
   checkLetter = true; 
  }else{ 
   setInvalid('#letter'); 
  }

  //validate capital letter
  if(pswd.match(/[A-Z]/)){ 
   setValid('#capital');
   checkCaps = true; 
  }else{ 
   setInvalid('#capital'); 
  }

  //validate number
  if(pswd.match(/\d/)){ 
   setValid('#number');
   checkNum = true;  
  }else{ 
   setInvalid('#number'); 
  }   

  //validate symbols
  if(pswd.match(/[^a-zA-Z0-9]/)){ 
   setValid('#symbol'); 
   checkSymbol = true; 
  }else{ 
   setInvalid('#symbol'); 
  }   

  //validate no spaces
  if(!pswd.match(/\s/)){
   setValid('#spaces'); 
   checkSpace = true;  
  }else{ 
   setInvalid('#spaces'); 
  }

  function setValid(e){$(e).removeClass('invalid').addClass('valid')} 
  function setInvalid(e){$(e).removeClass('valid').addClass('invalid')} 

  if(checkLength && checkLetter && checkCaps && checkNum && checkSymbol && checkSpace){ 
  alert("All good"); 
  }
  console.log("keyup");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="password1" type="text">

Answer 2

To me, it seems that your assignments are valid statements. Whether or not they are getting set the way you want is a different matter.

It is most likely that one of the flags is not being set the way you want it to be set. To check this, you could alert each of your flags (checkCaps, etc) to confirm that each value is set the way you want. If all of the true/false is correct, then the issue would be in your final if statement.

As many people have suggested, removing the == true is a good idea. Since Javascript is dynamically typed, there is a slight possibility that it is not treating your flags as a boolean, but as something else.

If removing the == true does not work, you could check different pairs of flags to see which one makes the entire statement false.

Answer 3

All of these have check* = true in the wrong place:

//validate letter
if(pswd.match(/[A-Za-z]/)){ 
 $('#letter').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#letter').removeClass('valid').addClass('invalid'); 
 checkLetter = true; 
}

//validate capital letter
if(pswd.match(/[A-Z]/)){ 
 $('#capital').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#capital').removeClass('valid').addClass('invalid'); 
 checkCaps = true; 
}

//validate number
if(pswd.match(/\d/)){ 
 $('#number').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#number').removeClass('valid').addClass('invalid'); 
 checkNum = true; 
}   

//validate symbols
if(pswd.match(/[^a-zA-Z0-9]/)){ 
 $('#symbol').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#symbol').removeClass('valid').addClass('invalid'); 
 checkSymbol = true; 
}

Insert the statements in the block following the if (where they are deemed valid) as opposed to in the else (where they are deemed invalid):

//validate letter
if(pswd.match(/[A-Za-z]/)){ 
 $('#letter').removeClass('invalid').addClass('valid'); 
 checkLetter = true; 
}else{ 
 $('#letter').removeClass('valid').addClass('invalid'); 
}

//validate capital letter
if(pswd.match(/[A-Z]/)){ 
 $('#capital').removeClass('invalid').addClass('valid'); 
 checkCaps = true; 
}else{ 
 $('#capital').removeClass('valid').addClass('invalid'); 
}

//validate number
if(pswd.match(/\d/)){ 
 $('#number').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#number').removeClass('valid').addClass('invalid'); 
 checkNum = true; 
}   

//validate symbols
if(pswd.match(/[^a-zA-Z0-9]/)){ 
 $('#symbol').removeClass('invalid').addClass('valid'); 
 checkSymbol = true; 
}else{ 
 $('#symbol').removeClass('valid').addClass('invalid'); 
}

And, although there are better ways of writing validation, this is a similar, yet more concise version of your snippet:

$("#password1").keyup(function() {
    var pswd = $(this).val();
    var checkLength = pswd.length >= 6;
    var checkLetter = /[A-Za-z]/.test(pswd);
    var checkCaps   = /[A-Z]/.test(pswd);
    var checkNum    = /\d/.test(pswd);
    var checkSymbol = /[^A-Za-z0-9]/.test(pswd);
    var checkSpace  = !/\s/.test(pswd);

    $("#length") .removeClass("valid invalid").addClass(checkLength ? "valid" : "invalid");
    $("#letter") .removeClass("valid invalid").addClass(checkLetter ? "valid" : "invalid");
    $("#capital").removeClass("valid invalid").addClass(checkCaps   ? "valid" : "invalid");
    $("#number") .removeClass("valid invalid").addClass(checkNum    ? "valid" : "invalid");
    $("#symbol") .removeClass("valid invalid").addClass(checkSymbol ? "valid" : "invalid");
    $("#spaces") .removeClass("valid invalid").addClass(checkSpace  ? "valid" : "invalid");

    if(checkLength && checkLetter && checkCaps && checkNum && checkSymbol && checkSpace) {
        alert("All good");
    }
});