2

I am trying to add a custom validation form with mixin.

I have created simple module Mageplaza_Helloworld.

In \app\code\Mageplaza\HelloWorld\view\frontend\web\js\requirejs-config.js:

<script type="text/javascript">
var config = {
    config: {
        mixins: {
            'mage/validation': {
                'Mageplaza_HelloWorld/js/validation-mixin': true
            }
        }
    }
}
</script> 

And in: \app\code\Mageplaza\HelloWorld\view\frontend\web\js\validation-mixin.js:

<script type="text/javascript">
define([
    'jquery'
], function ($) {
    "use strict";

    return function () {
        $.validator.addMethod(
            'validate-jurgis',
            function (value) {
                $.mage.__('Your validation error message');
                return false;
            },

        );
    }
});
</strict>

Im returing false just to see if it works at all (which it doesnt)

And in vendor\magento\module-checkout\view\frontend\layout\checkout_index_index.xml I assign it like:

<item name="telephone" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="tooltip" xsi:type="array">
            <item name="description" xsi:type="string" translate="true">For delivery questions.</item>
        </item>
    </item>
    <!-- add a validation code at here -->
    <item name="validation" xsi:type="array">
        <item name="validate-jurgis" xsi:type="string">true</item>
    </item>
    <!-- end of validation -->
</item>

(If I replace validate-jurgis with an existing form, it works)

But it doesnt work. I get no errors and am able to proceed...

Attempt nr. 3

\app\code\Mageplaza\HelloWorld\view\base\web\js\requirejs-config.js

<script type="text/javascript">
var config = {
    config: {
        mixins: {
            'Magento_Ui/view/base/web/js/lib/validation/rules': {
                'Mageplaza_HelloWorld/js/validation-mixin': true
            }
        }
    }
}
</script> 

\app\code\Mageplaza\HelloWorld\view\base\web\js\validation-mixin.js

<script type="text/javascript">
define([
    'mage/translate'
], function ($t) {
    'use strict';

    return function (rules) {
        rules['validate-jurgis'] = {
            handler: function () {
                return false;
            },
            message: $t('My message')
        };

        return rules;
    };
});
</script>

vendor\magento\module-checkout\view\frontend\layout\checkout_index_index.xml

<item name="validation" xsi:type="array">
<item name="validate-jurgis" xsi:type="string">true</item>
</item>
6

Hi @Jurģis Toms Liepiņš - your answer helped me a lot!

It appears there are two JavaScript validation implementations:

mage/validation.js

The mage/validation file is referenced by mage/validation/validation, which is mapped with RequireJS to validation.

Inchoo has an article on how to use this.

Magento_Ui/js/lib/validation/rules.js

The Magento_Ui/js/lib/validation/rules.js file is referenced in Magento_Ui/js/form/element/abstract and Magento_Ui/js/form/element/file-uploader and seems to be used to validate UI form elements.

Example using this validation in XML layout:

<item name="example-input-element" xsi:type="array">
    <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract</item>
    <item name="config" xsi:type="array">
        <item name="customScope" xsi:type="string">shippingAddress</item>
        <item name="template" xsi:type="string">ui/form/field</item>
        <item name=elementTmpl" xsi:type="string">ui/form/element/input</item>
    </item>
    <item name="validation" xsi:type="array">
        <item name="required-entry" xsi:type="boolean">true</item>
        <item name="max_text_length" xsi:type="number">255</item>
        <item name="validate-address-not-pobox" xsi:type="boolean">true</item>
    </item>
</item>

Here is the necessary code to add custom validation rules to the two implementations:

requirejs-config.js

var config = {
    config: {
        mixins: {
            'mage/validation': {
                'js/my-validation': true
            },
            'Magento_Ui/js/lib/validation/rules': {
                'js/my-ui-validation': true
            }
        }
    }
};

js/my-validation.js (for mage/validation)

define(['jquery'], function ($) {
    'use strict';

    return function() {
        // PO Box addresses
        $.validator.addMethod(
            'validate-address-not-pobox',
            function (v) {
                return !/p(\s|.){0,2}?o(\s|.){0,2}?.*box|post(\s|.){0,2}?office/i.test(v);
            },
            $.mage.__('Address cannot be a PO Box address.')
        );
    }
});

js/my-ui-validation.js (for Magento_Ui/js/lib/validation/rules)

define(['mage/translate'], function($t) {
    'use strict';

    return function(rules) {
        rules['validate-address-not-pobox'] = {
            handler: function (v) {
                return !/p(\s|.){0,2}?o(\s|.){0,2}?.*box|post(\s|.){0,2}?office/i.test(v);
            },
            message: $t('Address cannot be a PO Box address.')
        };
        return rules;
    };
});
  • Ah, thanks, for the nice explanation, I figured it out eventually, but thanks for putting in time to write a proper step-by-step, will definitely be useful in the future. – Jurģis Toms Liepiņš Jun 15 '18 at 6:42
0

@Logan great info, there is a more supported way to add to the UI rules.

Add the mixin:

'Magento_Ui/js/lib/validation/validator': {
            'js/my-ui-validation': true
        }

Then add the rule definition:

define([
    'jquery',
], function ($) {
    'use strict';

    return function (validator) {

        validator.addRule(
            'my-custom-phone-number-rule',
            function (value, params, additionalParams) {
                return $.mage.isEmptyNoTrim(value) || value.match(/^[0-9 \.-]+$/);
            },
            $.mage.__("Please enter a valid phone number.")
        );

        return validator;
    };
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.