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

Question 1

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.

Question 2

have you found any solution for this?

Question 3

Have you add validation for mobile number with country code flag right?

Question 4

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')
 );

Question 5

Add the JavaScript Validation Logic

 define([
 'jquery',
 'mage/translate' 
 ], function(,ドル $t) {
 'use strict';
 $.validator.addMethod(
 'custom-validation',
 function (value, element) {
 // Your validation logic here
 // Return true if the field is valid, false otherwise
 },
 $t('Your error message here.')
 );
});

Ishak Ali Ishak Ali 1197 bronze badges · Answer 1 · 2021-02-10 07:35:52Z

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')
 );

Prachi Prachi 415 bronze badges · Answer 2 · 2023-08-17 12:42:49Z

Add the JavaScript Validation Logic

 define([
 'jquery',
 'mage/translate' 
 ], function(,ドル $t) {
 'use strict';
 $.validator.addMethod(
 'custom-validation',
 function (value, element) {
 // Your validation logic here
 // Return true if the field is valid, false otherwise
 },
 $t('Your error message here.')
 );
});

Stack Exchange Network

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

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

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

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions