1

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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