How to create custom form validations in Magento 2?
If you want to add a custom validation rule in Magento 2 using the mage/validation library, before submitting it to the server, then follow these steps:
Step 1. Decide what way to use to initialize custom form validation in Magento 2:
Using the data-mage-init attribute:
<form id="my-form" data-mage-init='{"validation": {}}'>
...
</form>
Using the text/x-magento-init script type tag:
<script type="text/x-magento-init">
{
"#my-form": {
"validation": {}
}
}
</script>
Form Magento validation rules can be found here.
Step 2. Input Magento 2 validation rules for a form field:
As a data-validate attribute
<input id="field-1" ... data-validate='{"required":true}'/>
As a data-validate attribute with arguments
<input id="field-1" ... data-validate='{"required":true, "minlength":10}'/>
As an attribute
<input id="field-1" ... required="true"/>
As an attribute with arguments
<input id="field-1" ... required="true" minlength="15"/>
As a class name
<input id="field-1" ... class="input-text required-entry"/>
As a class name with arguments
<input id="field-1" ... class="input-text required-entry" minlength="15"/>
Using data-mage-init
<form ... data-mage-init='{"validation": {"rules": {"field-1": {"required":true}}}}'>
...
</form>
Using data-mage-init with arguments
<form ... data-mage-init='{"validation": {"rules": {"field-1": {"required":true, "minlength":20}}}}'>
...
</form>
Backend form fields validation methods in Magento 2:
<form class="form" id="my-form" method="post" data-mage-init='{"validation":{"rules": {"field-4": {"required":true}}}}'>
<fieldset class="fieldset">
<div class="field name required">
<label class="label" for="field-1"><span>Field 1 (using data-validate)</span></label>
<div class="control">
<input name="field-1" id="field-1" title="Field 1" value="" class="input-text" type="text" data-validate='{"required":true, "url": true}'/>
</div>
</div>
<div class="field name required">
<label class="label" for="field-2"><span>Field 2 (using attribute)</span></label>
<div class="control">
<input name="field-2" id="field-2" title="Field 2" value="" class="input-text" type="text" required="true"/>
</div>
</div>
<div class="field name required">
<label class="label" for="field-3"><span>Field 3 (using classname)</span></label>
<div class="control">
<input name="field-3" id="field-3" title="Field 3" value="" type="text" class="input-text required-entry"/>
</div>
</div>
<div class="field name required">
<label class="label" for="field-4"><span>Field 4 (using data-mage-init)</span></label>
<div class="control">
<input name="field-4" id="field-4" title="Field 4" value="" class="input-text" type="text"/>
</div>
</div>
</fieldset>
<div class="actions-toolbar">
<div class="primary">
<button type="submit" title="Submit" class="action submit primary">
<span>Submit</span>
</button>
</div>
</div>
</form>
As a result, the Magento 2 form will get validated without submitting it:
If you want to create custom Magento 2 checkout validations that will be performed before the order is formed or placed, then do the following:
Step 1. Create the validator:
Add your customizations in a separate module and don’t edit the default Magento code. It is recommended that your custom module should depend on the Magento_Checkout module. Create a .js file in the custom module directory when implementing the validator. It should be located under <your_module_dir>/view/frontend/web/js/model directory.
Create a .js file in the custom module directory when implementing the validator. It should be located under <your_module_dir>/view/frontend/web/js/model directory. Here's a sample of the validator .js file:
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;
}
}
}
);
Step 2. Add validator to the validators pool:
In the <your_module_dir>/view/frontend/web/js/view directory create a new <your-validation>.js file with the following code:
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/additional-validators',
'<your_module>/js/model/your-validator'
],
function (Component, additionalValidators, yourValidator) {
'use strict';
additionalValidators.registerValidator(yourValidator);
return Component.extend({});
}
);
Step 3. The next step in adding custom Magento 2 checkout validation is to create a new <your_module_dir>/view/frontend/layout/checkout_index_index.xml file in the custom module directory and add the following code to this file's field:
<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">%your_module_dir%/js/view/%your-validation%</item>
</item>
<!-- Declare your validation. END -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Step 4. Deploy static content and clean cache:
Clean the cache in order not to face the Magento 2 form validation not working issue.
The following commands are needed for production mode, they are not needed in developer mode:
Deploy static content:
bin/magento setup:static-content:deploy
Clean cache:
bin/magento cache:clean
If you need even more functionality for your store, then you can use One Step Checkout extension or Magento Custom Development Services. The development team can develop a module based on your needs or implement the functionality that you need.