I have created a new validation rule.
app/code/Vagwan/MotoValidation/view/frontend/requirejs-config.js
var config = {
config: {
mixins: {
'Magento_Ui/js/lib/validation/validator': {
'Vagwan_MotoValidation/js/validation-ui-mixin': true
}
}
}
}
JS script
app/code/Vagwan/MotoValidation/view/frontend/web/js/validation-ui-mixin.js
define([
'jquery',
], function ($) {
'use strict';
return function (validator) {
validator.addRule(
'mobilePL',
function(value) {
return value.length > 9 && value.match(/^((0|\+44)7\d{3}\s?\d{6})$/);
},
$.mage.__('Please specify a valid mobile number')
);
return validator;
};
});
And enabled validation rule in custom checkout:
app/code/Vagwan/CustomCheckout/Plugin/Block/LayoutProcessor.php
$vatId = [
'component' => 'Vagwan_CustomCheckout/js/view/form/element/vat_id',
'sortOrder' => 61,
'label' => __('**bleep**'),
'dataScope' => 'billingAddress.vat_id',
'provider' => 'checkoutProvider',
'config' => [
'customScope' => 'billingAddress',
'template' => 'Vagwan_CustomCheckout/form/element/vat_id',
],
'validation' => [
'required-entry' => false,
'mobilePL' => true
],
'required' => 0,
];
Original Magento2 rule:
app/code/Magento/Ui/view/base/web/js/lib/validation/rules.js
"mobileUK": [
function(value) {
return value.length > 9 && value.match(/^((0|\+44)7\d{3}\s?\d{6})$/);
},
$.mage.__('Please specify a valid mobile number')
],
It is very weird, because when I am using default built-in validation rule called mobileUK the input is optional, when I use my custom made validation rule mobilePL then input is changed to required input. mobilePL and mobileUK has same JS script inside. One is custom antother is standard magento2 rule. How can I avoid this bug ?