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

dmitrii_fediuk · April 29, 2018, 8:57am

Implementation

magento/magento2/blob/2.2.3/lib/web/mage/validation.js#L1634-L1661


/**
 * Validate form field without instantiating validate plug-in.
 *
 * @param {Element|String} element - DOM element or selector
 * @return {Boolean} validation result
 */
$.validator.validateElement = function (element) {
    var form, validator, valid, classes;


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


    if (validator) {
        return validator.element(element.get(0));
    }
    valid = true;
    classes = element.prop('class').split(' ');
    $.each(classes, $.proxy(function (i, className) {
        if (this.methods[className] && !this.methods[className](element.val(), element.get(0))) {
            valid = false;


            return valid;
        }
    }, this));


    return valid;
};

Usages

1. Magento_Authorizenet/js/direct-post::validate()

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Authorizenet/view/adminhtml/web/js/direct-post.js#L59-L70


validate: function () {
    this.isValid = true;
    this.inputs.each(function (elemIndex) {
        if ($(this.code + '_' + elemIndex)) {
            if (!jQuery.validator.validateElement($(this.code + '_' + elemIndex))) {
                this.isValid = false;
            }
        }
    }, this);


    return this.isValid;
},

2. Magento_Shipping/order/packaging::validate()

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Shipping/view/adminhtml/web/order/packaging.js#L246-L268


validate: function () {
    var dimensionElements = $('packaging_window').select(
        'input[name=container_length],input[name=container_width],input[name=container_height],input[name=container_girth]:not("._disabled")'
    );
    var callback = null;


    if (dimensionElements.any(function (element) {
        return !!element.value;
    })) {
        callback = function (element) {
            $(element).addClassName('required-entry');
        };
    } else {
        callback = function (element) {
            $(element).removeClassName('required-entry');
        };
    }
    dimensionElements.each(callback);


    return result = $$('[id^="package_block_"] input').collect(function (element) {
        return this.validateElement(element);
    }, this).all();
},

3. Magento_Shipping/order/packaging::validateCustomsValue()

github.com

magento/magento2/blob/2.2.3/app/code/Magento/Shipping/view/adminhtml/web/order/packaging.js#L288-L322


validateCustomsValue: function () {
    var items = [];
    var isValid = true;
    var itemsPrepare = [];
    var itemsPacked = [];


    this.packagesContent.childElements().each(function (pack) {
        itemsPrepare = pack.select('[data-role="package-items"]')[0];


        if (itemsPrepare) {
            items = items.concat(itemsPrepare.select('.grid tbody tr'));
        }
        itemsPacked = pack.select('.package_items')[0];


        if (itemsPacked) {
            items = items.concat(itemsPacked.select('.grid tbody tr'));
        }
    });


    items.each(function (item) {
        var itemCustomsValue = item.select('[name="customs_value"]')[0];


        if (!this.validateElement(itemCustomsValue)) {
            isValid = false;
        }
    }.bind(this));


    if (isValid) {
        this.messages.hide().update();
    } else {
        this.messages.show().update(this.validationErrorMsg);
    }


    return isValid;
},

4. Magento_User/js/delete-user-account

github.com

magento/magento2/blob/2.2.3/app/code/Magento/User/view/adminhtml/web/js/delete-user-account.js#L12-L27


return function (params, elem) {


    elem.on('click', function () {


        postData = {
            'data': {
                'user_id': params.objId,
                'current_password': $('[name="current_password"]').val()
            }
        };


        if ($.validator.validateElement($('[name="current_password"]'))) {
            window.deleteConfirm(params.message, params.url, postData);
        }
    });
};

dmitrii_fediuk · April 29, 2018, 9:00am