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">