Magento2 Checkout – Add Custom Validator for Phone Number

checkoutmagento2magento2.2.3

On checkout I want users to be able to use 0-9 + and – in the phone field. I'm trying to add a custom validator in my module but I can't seem to get it to work. I followed the steps in this tutorial but in the text is says it's only for the second checkout step but I need it for the first.

How would I get this to work for the phone field? Thanks in advance.

I currently have this:

checkout_index_index

<?xml version="1.0"?>
  <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
  xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
    <referenceBlock name="checkout.root">
        <arguments>
            <argument name="jsLayout" xsi:type="array">
                <item name="components" xsi:type="array">
                    <item name="checkout" xsi:type="array">
                        <item name="children" xsi:type="array">
                            <item name="steps" xsi:type="array">
                                <item name="children" xsi:type="array">
                                    <item name="shipping-step" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="shippingAddress" xsi:type="array">
                                                <item name="children" xsi:type="array">

                                                    <item name="shipping-address-fieldset" xsi:type="array">
                                                        <item name="children" xsi:type="array">

                                                            <item name="telephone" xsi:type="array">
                                                                <item name="validation" xsi:type="array">
                                                                    <item name="validate-phonenumber"
                                                                          xsi:type="string">true
                                                                    </item>
                                                                    <item name="stripped-min-length"
                                                                          xsi:type="string">10
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>

                                            </item>
                                        </item>
                                    </item>
                                    <item name="billing-step" xsi:type="array">
                                        <item name="children" xsi:type="array">
                                            <item name="payment" xsi:type="array">
                                                <item name="children" xsi:type="array">

                                                    <item name="additional-payment-validators" xsi:type="array">
                                                        <item name="children" xsi:type="array">
                                                            <item name="validate-phonenumber" xsi:type="array">
                                                                <item name="component" xsi:type="string">
                                                                    BB_Checkout/js/view/validate-phonenumber
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </argument>
        </arguments>
    </referenceBlock>
</body>

model/validate-phonenumber.js

define(
[],
function () {
    'use strict';
    return {
        /**
         * Validate something
         *
         * @returns {boolean}
         */
        validate: function() {
            return utils.isEmptyNoTrim(value) || !/[^\d\+\-]/.test(value);
        }
    }
}
 );

view/validate-phonenumber.js

define(
[
    'uiComponent',
    'Magento_Checkout/js/model/payment/additional-validators',
    'BB_Checkout/js/model/validate-phonenumber'
],
function (Component, additionalValidators, validatePhonenumber) {
    'use strict';
    additionalValidators.registerValidator(validatePhonenumber);
    return Component.extend({});
}
 );

Best Answer

I ended up overwriting rules.js.

I added the following:

'validate-phonenumber': [
        function(value) {
            if (value.length < 10) {
                return false;
            } else {
                return utils.isEmptyNoTrim(value) || !/[^\d\+\-\(\) ]/.test(value);
            }
        },
        $.mage.__('Voer een geldig telefoonnummer in bijvoorbeeld: 0612345678.')
    ],

checkout_index_index.xml

<item name="telephone" xsi:type="array">
      <item name="validation" xsi:type="array">
            <item name="validate-phonenumber"
                     xsi:type="boolean">true
         </item>
    </item>
</item>

And in requirejs-config.js I added this:

   'Magento_Ui/js/lib/validation/rules': 'BB_Checkout/js/lib/validation/rules-overwrite',
Related Topic