15/08/2022
We use cookies to make your experience better. To comply with the new e-Privacy directive, we need to ask for your consent to set the cookies. Learn more.
How to add custom validations before order placement Magento 2
Create the validator
Directory
VendorName/ModuleName/view/frontend/web/js/model/isGmail.js
Content for this file
define(
[
'jquery',
'mage/validation'
],
function ($) {
'use strict';
return {
/**
* Validate checkout agreements
*
* @returns {Boolean}
*/
validate: function () {
var emailValidationResult = false;
var email = $('form[data-role=email-with-possible-login]').val();
if(~email.search("gmail.com")){ //should use Regular expression in real store.
emailValidationResult = true;
}
return emailValidationResult;
}
};
}
);
Add validator to the validators pool
Directory
VendorName/ModuleName/view/frontend/web/js/view/isGmail.js
Content for this file
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/additional-validators',
'VendorName_ModuleName/js/model/isGmail'
],
function (Component, additionalValidators, gmailValidation) {
'use strict';
additionalValidators.registerValidator(gmailValidation);
return Component.extend({});
}
);Declare the validation in the checkout layout
Directory
VendorName/ModuleName/view/frontend/layout/checkout_index_index.xml
Content for this file
<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="gmailValidation" xsi:type="array">
<item name="component" xsi:type="string">VendorName_ModuelName/js/view/isGmail</item>
</item>
<!-- Declare your validation. END -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>Test the new validator
Now flush the cache and checkout with different emails.
If you are looking for Magento Developers, visit Magento Developer Agency.
Related Products