In this example we use an on-click event to access the strong password object (sp) internal strength counter. This is easily accessible, so it can be coded to check as part of a form validation. This interopability, provides additional features, if so desired.

CSS Code Sample:

The same styles for the first Strong Password example are used in this example.

The additional CSS is for the validation checks.

  1. .errMsg {
  2.     background-color: #fcc;
  3.     font-weight: bold;
  4.     color: #900;
  5.     margin: 2px 0px;
  6.     padding: 6px;
  7.     border: #900 2px solid;
  8. }
  9.  
  10. .errElem {
  11.     background-color: #933;
  12.     color: #fff;
  13.     border: #300 1px dashed;
  14. }
  15. .required {
  16.     color: #f00;
  17. }

JavaScript Code Sample:

Some of the JavaScript will look familar here. We will create a standard instance of the Strong Password class. Then we pass it a new function, as we did in the second Strong Password example. This function will take the password strength and send it to a hidden field.

You will also notice from the init function that the Form Validator library is loaded. The hidden field on the form, has an attribute of minval="10", which means that it will require a minimum value of 10 to pass validation. Since the hidden field cannot lose focus, since it cannot gain focus, the validation check will have to mainually called.

The validation check can be either called when the submit button is pressed (we're faking the submit here) or when the password's strength is checked. If you check it each time the password is typed, you do have a potential problem of every other field that does not pass criteria generating their error message at the same time. This would most likely cause frustration and/or confusion in the user, so I wouldn't reccomend validating the form each time the password is modified.

Note: This isn't necessarily the best method, as it allows only one password on a page, however there are not many times that two different passwords are needed on a page. If you are concerned about validating passwords, you don't need to worry about testing the strength of both entries, only the first entry, and then checking to see if the two password entries are equal.

  1. function setStrength() {
  2.     $('#pwStren').val(sp.getPasswordStrength());
  3. }
  4. sp = null;
  5. function init() {
  6.     initializeValidator();
  7.     sp = new StrongPassword({allowSpecialChars: true}, setStrength);
  8. }