I'm adding a password strength function to my existing validate settings and I'm down to one last item that I'm not sure how best to accomplish. My error display looks like this:
highlight: function(label) {
$(label).closest('.form-element').addClass('error').closest('.form-element').removeClass('success');
$('#result').html('');/*removes any strength messages on failed validation*/
},
success: function(label) {
label
.text('OK!').addClass('valid')
.closest('.form-element').addClass('success');
},
the id "result" is the password strength message. So when a validation error (range length, required) etc. is triggered any message regarding the strength of the password is hidden.
The relevant portion password strength check is this:
if (strength < 2 ){
$('#result').removeClass();
$('#result').addClass('passwordWeak');
return '(Password is weak)'
} else if (strength == 2) {
$('#result').removeClass();
$('#result').addClass('passwordGood');
return '(Password is good)'
} else {
$('#result').removeClass();
$('#result').addClass('passwordStrong');
return '(Password is strong)'
}
};
What I'd like to have happen is if any of the validate errors are shown, don't show one of these errors. They way I'm triggering it is enter 3 characters (shows "password is weak"), tab to next field (which fires the validate error on minimum length not 6 and hides "password is weak"), and then go back to add more characters to the password I still have the validate error message but as soon as I key up on character 4 I get the "password is weak". I only one those ratings to show if no errors from validate are currently showing.
The generated error label for validate looks like this:
<label class="error" for="thispassword" generated="true">Password must be between 6 and 50 characters.</label>