Password Validation

[QuillDesign]

Using your script through a few forms and tried to figure out how to accomplish specific validation on a password field where the password requires to have lower and upper case letters, numbers and special characters (like @ or + etc).

Can you natively setup the form validator to do this? (we're also combining it with a password confirm field).

Any help would be appreciated.

Thanks!

[victorjonsson]

I'm thinking the markup would look something like this:

<input type="password"
   data-validation="password"
   data-validation-require-uc-letter="true"
   data-validation-require-lc-letter="true"
   data-validation-require-special-char="true"
   data-validation-require-numeral="true">

So the name of the validator would simply be password. All the attributes above should default to true. The following markup would then require a password containing at least one lowercase letter, one uppercase letter, one special character, one number, one special character and consist out of at least 8 characters:

<input type="password" data-validation="length password" data-validation-length="min8" />

[QuillDesign]

So data-validation-require-uc-letter (and the others) are valid data valididators?

[victorjonsson]

No, this feature is not implemented. I posted a suggestion on how the validator could be used.

[QuillDesign]

Ok I thought so ... just was hoping :)

Yes that would be good or maybe instead of "True" give it a value ..
data-validation-require-uc-letter="3" requires "3" uppercase letters

[victorjonsson]

that's a great idea

[mufaddalmw]

I have same requirement to implement for one of client, just wondering if this release already available on github or not yet?

Can you show help message like below, while user type password - it will mark green completed steps:

[victorjonsson]

As of last commit this is now possible. It could look something like the following:

<style>
    #password .help-block.form-error {
      display: none; /* hide error message for password input */
    }

    .password-requirement {
      color: #999;
    }
    .password-requirement.satisfied {
      color: darkgreen;
    }
    .password-requirement.dissatisfied {
      color: darkred;
    }
  </style>
...
<form style="padding:20px">
  <div class="form-group" id="password">
    <label class="control-label">Password</label>
    <input type="text" class="form-control"
           data-validation="complexity"
           data-validation-event="keyup"
           data-validation-require-uc-letter="1"
           data-validation-require-lc-letter="1"
           data-validation-require-special-char="1"
           data-validation-require-numeral="1"
           data-validation-require-length="10"
    />
  </div>
  <p class="uc-letter password-requirement">
    Must contain upper case letters
  </p>
  <p class="lc-letter password-requirement">
    Must contain lower case letters
  </p>
  <p class="special-char password-requirement">
    Must contain special characters
  </p>
  <p class="numeral password-requirement">
    Must contain numbers
  </p>
  <p class="length password-requirement">
    Min 10 chars
  </p>
  <hr>
  <input type="submit" class="btn">
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="../form-validator/jquery.form-validator.min.js"></script>

<script>
  $.validate({
    modules: 'security',
    onModulesLoaded: function () {
      var $requirements = $('.password-requirement');
      $('#password input')
        .on('complexityRequirementValidation', function(evt, satisfied, requirement) {
          var classToRemove = satisfied ? 'dissatisfied':'satisfied',
              classToAdd = satisfied ? 'satisfied':'dissatisfied';
            $requirements.filter('.'+requirement)
              .removeClass(classToRemove)
              .addClass(classToAdd);
        });
    },
    onSuccess: function() {
      alert('Valid!');
      return false;
    }
  });
</script>

Notice that I have also added data-validation-require-lengthwhich means that you shouldn't use the length-validator separately.