Magento – Magento 2 : How add validation validator to custom input field in checkout page

checkoutinputmagento2.2.3payment-methodsvalidation

We have to add custom form in check-money order payment method.We have to add custom validations before order placement but its not working.
please check below code

1)Create the validator:-

Custom_Checkmethod/view/frontend/web/js/model/custom-validation.js

define(
    [
    'jquery',
    'mage/validation'
    ],
    function ($) {
        'use strict';
        return {
            validate: function() {
                $.validator.addMethod(
                        'checkmonumber',
                        function (value) {
                            return true;
                        },
                        $.mage.__('Please enter number')
                    );
               return true;
            }
        }
    }
);

2)Add validator to the validators pool:-

define(
    [
        'uiComponent',
        'Magento_Checkout/js/model/payment/additional-validators',
        'Custom_Checkmethod/js/model/custom-validation'
    ],
    function (Component, additionalValidators, yourValidator) {
        'use strict';
        additionalValidators.registerValidator(yourValidator);
        return Component.extend({});
    }
);

Checkout Form :-

<fieldset data-bind="attr: {class: 'fieldset payment items allbank ' + getCode(), id: 'payment_form_' + getCode()}">
    <label data-bind="attr: {for: getCode() + '_checknumber'}" class="label">
        <span><!-- ko i18n: 'Check Number'--><!-- /ko --></span>
    </label>
    <div class="control">
        <input data-validate="{'required-entry':true, 'validate-number':true}" type="text" name="payment[checknumber]" class="input-text required-entry checkmonumber" value=""
               data-bind="attr: {
                                id: getCode() + '_checknumber',
                                title: $t('Check Number'),
                                'data-container': getCode() + '-checknumber',
                                'data-validate': JSON.stringify({'required':true})},
                                valueUpdate: 'keyup' "/>
    </div>
</fieldset>

4)Declare the validation in the checkout layout

<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">
                                                        <!-- Declare your validation. START -->
                                                        <item name="your-validator" xsi:type="array">
                                                            <item name="component" xsi:type="string">Custom_Checkmethod/js/view/add-validator</item>
                                                        </item>
                                                        <!-- Declare your validation. END -->
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
    </arguments>
</referenceBlock>
    </body>
</page>

when we click on place order button then add input field validation.I am not able to how to add it?please tell me how to validate input field.

Best Answer

inside in your custom-validation.js

I don't see any validation there

so try to add

 $.validator.addMethod(
                        'checkmonumber',
                        function (value) {
                           if (value == null) { return false; }
                          // numerical validation or write your custom logic
                          return /^[0-9]+$/i.test(value);                             

                        },
                        $.mage.__('Please enter number')
                    );
Related Topic