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 (

  • ) in list value of password field passes validation. great. each rule passed, text rule turns green.

    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

    Popular posts from this blog

    blackberry 10 - how to add multiple markers on the google map just by url? -

    php - guestbook returning database data to flash -

    delphi - Dynamic file type icon -