undefined validator: validate_strength

[bewards]

default and location validators are working fine, but "validate_strength" will not load:

Uncaught Error: Using undefined validator "validate_strength"

The input
<input tabindex="1" data-validation="strength" data-validation-strength="2" id="Password" name="Password" placeholder="* Password" type="password">

My config set up

• The onModulesLoaded callback does not get hit. I have a single form on the page that gets bound.

var Validator = (function() {

    // vars
    var defaultFormClass = 'form',
        clientErrClass = 'err-client',
        errBorderColor = '#ec331a',
        recaptchaClass = '.vca-recaptcha',
        emailCaptureStart = '.email-capture-start',
        emailCaptureEnd = '.email-capture-end';

    //settings
    var globalOptions = {
        showHelpOnFocus: false,
        validateOnBlur: false,
        validateHiddenInputs: true,
        modules: 'location, security',
        borderColorOnError: errBorderColor,
        onModulesLoaded : function() {
            console.log('All modules loaded');
        },
        onElementValidate: function (valid, $el, $form, errorMess) {

            // email capture
            if(valid && $form.closest(emailCaptureStart).length > 0)
            {
                $el.siblings("input[type=submit]").removeAttr("disabled");
            }
            else
            {
                $el.siblings("input[type=submit]").attr("disabled", "disabled");
            }
        },
        onValidate: function ($form) {

        },
        onError: function ($form) {
            $form.addClass(clientErrClass);

            // transform error messages to list
            //alert($form.find('.form-error').length);
            return false;
        },
        onSuccess: function ($form) {
            $form.removeClass(clientErrClass);

            // email capture
            if($form.closest(emailCaptureStart).length > 0) {
                $form.closest(emailCaptureStart).fadeOut(500, function() {
                    $(emailCaptureEnd).fadeIn(500);
                });
                return false;
            }
            return true;
        }
    };

    function setCustomValidators() {
        $.formUtils.addValidator({
            name: 'recaptcha',
            validatorFunction: function (value, $el, config, language, $form) {

                if (typeof window.grecaptcha !== 'undefined') {

                    var widgetId = $form.find(recaptchaClass).data('widgetId');
                    if (typeof widgetId === "undefined") {
                        return false;
                    }

                    var v = window.grecaptcha.getResponse(widgetId);
                    if (v.length !== 0) {
                        return true;
                    }
                    return false;
                }
                return false;
            },
            errorMessage : 'Recaptcha required',
            errorMessageKey: 'recaptcharequired'
        });
    }

    // start
    function init() {

        setCustomValidators();

        $(defaultFormClass).each(function() {
            var $currForm = $(this);

            globalOptions.form = $currForm;
            globalOptions.errorMessagePosition = $currForm.find('.err-client .current-errors');

            // set validator
            $.validate(globalOptions);
        });
    }

    return {
        init: init()
    }
})();

[victorjonsson]

What version of the plugin are you using?

[bewards]

From bower, @Version 2.2.81 (released oct. 3, 2015). I can update the minor version to 2.3 if that helps.

[victorjonsson]

I'm doubting that the validators from the location module is working for you. Looking at the console output, you can see that only the default validators are attached.

I'm curious as to why you call $.validate multiple times, one for each form?

[victorjonsson]

I'm unable to reproduce this bug http://jsbin.com/pagihokuqo/edit?html,js,output (I have also tried locally with latest version of the plugin).

This means that you're including the scripts on the page in a way that makes it impossible for the plugin to resolve the URL's of the modules. Could you please provide me with the markup of your script tags.

[bewards]

Yeah, one for each form, as some of the global options have to be overridden on a form basis.

There's only one script tag referenced, here's the source:
<script src="/Includes/_js/main.js?v=636069695225492271"></script>

The main.js file gets bundled using browserify, and is published to: "/Website/Includes/_js/main.js". In this same publish directory, the folder: "/Website/bower_components/jquery-form-validator/form-validator" does not exist whereas in the sln it does (the folder that contains the main js and validators). I did a search in the bundled page for "strength", no luck. I'll try updating from bower.

[victorjonsson]

If you're using browserify you must require each module. #404

If you don't want to include the source code of the modules in the bundle you have to use $.formUtils.loadModules and manually load the modules before calling the setup function $.validate

$.formUtils.loadModules('security, location', '/path/somewhere/jquery-form-validator/form-validator/');

[bewards]

That makes sense now.. I noticed my package.json file only brought in the main framework:

"browser": {
    "jqueryFormValidator": "./bower_components/jquery-form-validator/form-validator/jquery.form-validator.min.js",
},

I'll try bundling those modules first.

[bewards]

Confirmed fixed w/ requiring additional validators (used a shim because im using bower package):

package.json
"browser": {
"jqueryFormValidator": "./bower_components/jquery-form-validator/form-validator/jquery.form-validator.min.js",
"formValidatorSecurity": "./bower_components/jquery-form-validator/form-validator/security.js"
},

js module
require('jqueryFormValidator');
require("formValidatorSecurity");

One other question, maybe a side effect? I'm not receiving the error message (.form-error) below the input onError:

[victorjonsson]

that's because you have set validateOnBlur to false.

The use of errorMessagePosition is deprecated, and it seems to be messing things up for you. Here you can read more about custom error dialogs http://www.formvalidator.net/#configuration_position

[bewards]

Thanks, this has been extremely helpful. I have some forms that require a custom display of error messages below the form, such as simply wrapping each message in a list item and appending to a list. Given the submitErrorMessageCallback's 2nd parameter (errorMessages), is there a way to get a list of the error messages from this object, instead of just returning an error message container element (as stated ? When I debug, it looks like errorMessages is actually the full validator object:

$(defaultFormClass).each(function() {
    var $currForm = $(this);

    globalOptions.form = $currForm;

    var hasErrorContainer = $currForm.find('.err-client').length;
    if (hasErrorContainer) {
        globalOptions.errorMessagePosition = 'top';
        globalOptions.submitErrorMessageCallback = function($form, errorMessages, config) {
            return $form.find('.err-client .current-errors');
            //if (errorMessages) {
            //    displayErrorMessages($form, errorMessages);
            //}

            //return false;
        };
    } else {
        globalOptions.errorMessagePosition = 'inline';
    }

    // set validator
    $.validate(globalOptions);
});

// for a given form that doesn't display inline-error messages, adds (replaces previous) current error messages to the error message container
function displayErrorMessages($form, errorMessages) {
    var $errContainer = $form.find('.err-client .current-errors');
    if ($errContainer.length) {
        var $ul = $('<ul/>');
        $.each(errorMessages, function (msg) {
            $('<li/>').text(msg).appendTo($ul);
        });

        $errContainer.html($ul);
    }
}