Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

javascript If Variable(s) is True

Tags:

javascript

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?

like image 407
coffeemonitor Avatar asked Oct 19 '25 16:10

coffeemonitor


2 Answers

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">
like image 91
Christoph Avatar answered Oct 22 '25 06:10

Christoph


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");
    }
});

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!