How is `$.validator.validateSingleElement` implemented and used?

dmitrii_fediuk · April 29, 2018, 8:39am

Implementation

magento/magento2/blob/2.2.3/lib/web/mage/validation.js#L1676-L1733


/**
 * Validate single element.
 *
 * @param {Element} element
 * @param {Object} config
 * @returns {*}
 */
$.validator.validateSingleElement = function (element, config) {
    var errors = {},
        valid = true,
        validateConfig = {
            errorElement: 'label',
            ignore: '.ignore-validate'
        },
        form, validator, classes, elementValue;


    $.extend(validateConfig, config);
    element = $(element).not(validateConfig.ignore);


    if (!element.length) {
        return true;
    }


    form = element.get(0).form;
    validator = form ? $(form).data('validator') : null;


    if (validator) {
        return validator.element(element.get(0));
    }


    classes = element.prop('class').split(' ');
    validator = element.parent().data('validator') ||
        $.mage.validation(validateConfig, element.parent()).validate;


    element.removeClass(validator.settings.errorClass);
    validator.toHide = validator.toShow;
    validator.hideErrors();
    validator.toShow = validator.toHide = $([]);


    $.each(classes, $.proxy(function (i, className) {
        elementValue = element.val();


        if (element.is(':checkbox') || element.is(':radio')) {
            elementValue = element.is(':checked') || null;
        }


        if (this.methods[className] && !this.methods[className](elementValue, element.get(0))) {
            valid = false;
            errors[element.get(0).name] = this.messages[className];
            validator.invalid[element.get(0).name] = true;
            validator.showErrors(errors);


            return valid;
        }
    }, this));


    return valid;
};

Usages

1. Magento_CheckoutAgreements/js/model/agreement-validator::validate()

github.com

magento/magento2/blob/2.2.3/app/code/Magento/CheckoutAgreements/view/frontend/web/js/model/agreement-validator.js#L17-L38


/**
 * Validate checkout agreements
 *
 * @returns {Boolean}
 */
validate: function () {
    var isValid = true;


    if (!agreementsConfig.isEnabled || $(agreementsInputPath).length === 0) {
        return true;
    }


    $(agreementsInputPath).each(function (index, element) {
        if (!$.validator.validateSingleElement(element, {
            errorElement: 'div'
        })) {
            isValid = false;
        }
    });


    return isValid;
}

2. Magento_Customer/js/password-strength-indicator::_calculateStrength()

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Customer/view/frontend/web/js/password-strength-indicator.js#L58-L88


/**
 * Calculate password strength
 * @private
 */
_calculateStrength: function () {
    var password = this._getPassword(),
        isEmpty = password.length === 0,
        zxcvbnScore,
        displayScore,
        isValid;


    // Display score is based on combination of whether password is empty, valid, and zxcvbn strength
    if (isEmpty) {
        displayScore = 0;
    } else {
        this.options.cache.input.rules('add', {
            'password-not-equal-to-user-name': this.options.cache.email.val()
        });


        if (password.toLowerCase() === this.options.cache.email.val().toLowerCase()) {
            displayScore = 1;
        } else {
            isValid = $.validator.validateSingleElement(this.options.cache.input);
            zxcvbnScore = zxcvbn(password).score;
            displayScore = isValid ? zxcvbnScore : 1;
        }
    }


    // Update label
    this._displayStrength(displayScore);
},

3. Magento_Ui/js/form/form::isValidFields()

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/form/form.js#L144-L160


/**
 * Check if fields is valid.
 *
 * @param {Array}items
 * @returns {Boolean}
 */
function isValidFields(items) {
    var result = true;


    _.each(items, function (item) {
        if (!$.validator.validateSingleElement(item)) {
            result = false;
        }
    });


    return result;
}

4. Magento_Ui/js/modal/prompt::validate()

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Ui/view/base/web/js/modal/prompt.js#L128-L133


/**
 * Validate prompt field
 */
validate: function () {
    return $.validator.validateSingleElement(this.options.promptField);
},

dmitrii_fediuk · April 29, 2018, 8:46am