jquery - How to change DOM as 'if/else' statements are true individually, and also set variable to true if all if statements are true? -
wasn't sure how phrase question per usual.
i've been working on password validation while (few previous questions on it) , i'm getting closer.
i have html list showing rules password:
<form id="form-password-change" method="post" action="/notrelevantrightnow"> <div class="control-group"> <label class="control-label" for="input-username">{{label_username}}</label> <div class="controls"> <input type="text" id="input-username" name="username" class="required" value="{{username}}" autocomplete="off"> </div> </div> <div id="password-info"> <ul> <li id="length" class="invalid">password must 8 characters</li> <li id="letter" class="invalid">password must contain 3 letters</li> </ul> </div> <div class="control-group"> <label class="control-label" for="input-password">{{label_new_password}}</label> <div class="controls field"> <input type="password" id="input-password" name="password" placeholder="{{label_password}}" autocomplete="off"> </div> </div> <button type="submit" class="btn btn-large btn-wide btn-primary">send request</button> </form>
i add class of 'valid' each rule (
however, need variable set true if multiple if conditions true. example: if password longer 7 characters , contains @ least 3 letters, var pwdvalid = true.
as is, have set pwdvalid = false on else condition (which didn't expect have to), , add 'if' validation, once validates previous condition forgotten! if type 3 letters , submit, console shows valid, despite fact other condition (minimum 8 characters) not met.
here's js:
$(function(){ var pwdinput = $('#form-password-change #input-password'); var pwdvalid = false; function validatepwdstrength(){ var pwdvalue = $(pwdinput).val(); // works because when it's called it's called pwdinput, see end // validate length if (pwdvalue.length > 7) { $('#form-password-change #length').removeclass('invalid').addclass('valid'); pwdvalid = true; } else { $('#form-password-change #length').removeclass('valid').addclass('invalid'); pwdvalid = false; // had add in or remains true if passes if case , change field fails. } // regexp // validate number of letters letters if ( /([^a-z]*[a-z]){3,}/i.test(pwdvalue) ) { $('#letter').removeclass('invalid').addclass('valid'); pwdvalid = true; // add one, previous if cases forgotten. } else { $('#letter').removeclass('valid').addclass('invalid'); pwdvalid = false; } }; function validatepwdvalid(){ if (pwdvalid == true) { event.preventdefault(); console.log('password validated'); } else { event.preventdefault(); console.log('password failed'); } }; pwdinput.bind('change keyup input', validatepwdstrength); // keyup bit unpredictable $('#form-password-change').submit(validatepwdvalid); });
i might explode if don't fix soon.
try following. we'll initialize false, on first check set true if passes.. on subsequent checks set pwdvalid && true
if ever fails continue report false.
function validatepwdstrength(){ var pwdvalue = $(pwdinput).val(); // works because when it's called it's called pwdinput, see end pwdvalid = false; //start out false; // validate length if (pwdvalue.length > 7) { $('#form-password-change #length').removeclass('invalid').addclass('valid'); pwdvalid = true; } else { $('#form-password-change #length').removeclass('valid').addclass('invalid'); } // regexp // validate number of letters letters if ( /([^a-z]*[a-z]){3,}/i.test(pwdvalue) ) { $('#letter').removeclass('invalid').addclass('valid'); pwdvalid = pwdvalid && true; // add one, previous if cases forgotten. } else { $('#letter').removeclass('valid').addclass('invalid'); } };
Comments
Post a Comment