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>
</page>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({});
}
);
Any idea?
