I would like to restrict CC number (Ex: 4111111111111111) in the customer form fields in the magento2 frontend. Could you please advise me on how to do the step by step in Magento2.
Expected Results:
Expected Results For All Form input fields
The approach I have followed:
app/code/Vendor/Module/view/frontend/requirejs-config.js
var config = {
config: {
mixins: {
'Magento_Ui/js/lib/validation/validator': {
'Vendor_Module/js/validator-mixin': true
}
}
}
}
app/code/Vendor/Module/view/frontend/web/js/validator-mixin.js
define([
'jquery'
], function ($) {
"use strict";
return function () {
$.validator.addMethod(
'validation16digit',
function (v) {
console.log("validation16digit has been calling");
v = v.replace(/-/g,""); v = v.replace(/ /g,""); return !((/^\d+$/.test(v)) && ( (/([0-9]\d{12}(?:\d{3})?)/.test(v)) || (/(3[47]\d{13})/.test(v)) || (/(^(?:2131|1800|35\d{3})\d{11}$)/.test(v)) || (/((?:5020|5038|6304|6579|6761)\d{12}(?:\d\d)?)/.test(v)) || (/((?:6334|6767)\d{12}(?:\d\d)?\d?)/.test(v)) || (/(5[1-5]\d{14})/.test(v)) || (/(?:(?:(?:4903|4905|4911|4936|6333|6759)\d{12})|(?:(?:564182|633110)\d{10})(\d\d)?\d?)/.test(v))));
return v;
},
$.mage.__('Please Enter Valid Input')
);
}
});
app/code/Vendor/Module/view/frotend/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<script src="Vendor_Module::js/ccnumber1.js"/>
</head>
</page>
app/code/Vendor/Module/view/frotend/web/js/ccnumber1.js
require(['jquery'],
function($) {
"use strict";
$(document).ready(function() {
customValidations();
function customValidations() {
console.log("cc validatiaon calling");
$('.input-text').each(function() {
$(this).addClass("validation16digit");
});
}
});
});
1 Answer 1
You need to create a new validation rule with:
Vendor/Module/view/frontend/web/js/model/validation16digit.js
define(
['mage/translate', 'Magento_Ui/js/model/messageList'],
function ($t, messageList) {
'use strict';
return {
validate: function () {
const isValid = false; //Put your validation logic here
if (!isValid) {
messageList.addErrorMessage({ message: $t('a possible failure message ... ') });
}
return isValid;
}
}
}
);
Vendor/Module/view/frontend/web/js/view/validation16digit.js
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/additional-validators',
'/js/model/your-validator'
],
function (Component, additionalValidators, yourValidator) {
'use strict';
additionalValidators.registerValidator(yourValidator);
return Component.extend({});
}
);
Vendor/Module/view/frontend/layout/checkout_index_index.xml
<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="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="validation16digit" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/view/validation16digit</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
Source: link
Explore related questions
See similar questions with these tags.