Question

I’ve created a couple of custom validation methods for jQuery Validate. One is used for password strength testing. I’d like this to fire when input is first focused so it validates as the user types giving realtime feedback, noy just on form submission.

EDIT: The validation only runs when the form is submitted, I want it to run as the user types their password so they get real-time feedback about the password’s strength.

Ideally I only want this real-time validation to work on selected fields. I.e. the account email address shouldn’t behave this way before the form is submitted or it’ll keep alerting them their address in invalid before they finish typing it. However if it can only work when applied to all elements I’ll accept it for this form.

So, is it possible to call a jQuery Validate additional method on focus/keyup before the form has been submitted?

Here’s my new method that I want to call.

$.validator.addMethod('passwordStrength', function(password, element, param) {
// add our password test to
if (typeof zxcvbn === 'function') {
    var passwordMeter = $('#' + $(element).attr('id') + 'meter');
    var passwordMeterStrength = passwordMeter.find('.strength');
    var passwordMeterTrack = passwordMeter.find('.track');
    var passwordMeterBar = passwordMeterTrack.children();
    var strengthValues = ['Very weak', 'Weak', 'Average', 'Good', 'Strong'];
    //passwordMeter

    // get values of the other inputs in this form
    var otherinputs = [];
    if (param) {
        for (var input in param['user_inputs']) {
            // get the value and add it to an array
            otherinputs.push($(param['user_inputs'][input]).val());
        }
    }

    // run the test!
    var strength = testPasswordStrength(password, otherinputs);

    // show the strength of the password
    passwordMeterStrength.text(strengthValues[strength.score]);

    // change the class of our bar. nice browsers will animate this in CSS!
    passwordMeterBar.removeClass().addClass('bar strength' + strength.score);


    // we must be two or better
    if (strength.score > 1) {
        return true;
    } else {
        return false;
    }
} else {
    console.error('strength test is not loaded');
}
 }, '');

Answer 1

I ended up moving the main workings of the method into a separate function that is called by my method. I then binded the function to the password input. I chose the input event as this fires on keypress, and on change – it’s very flexible but often forgotten.

$.validator.addMethod('passwordStrength', function(password, element, param) {
    return passwordStrength(password, element, param);
}, '');

passwordEl.on('input', passwordStrength());

passwordStrength is the same as in my question.