Magento 2 Tutorial How To Add Custom Validation To Checkout

How To Add Magento 2 Custom Validation In Checkout

For example, if you only offer free shipping in some specific city, you need to add a place field and validate its input to validate the customer living in that city and can get freeship.

Step 1: Create a new js file

var config = {
map: {
"*": {
bsscommerceMethod: "<VendorName_ModuleName>/js/bsscommerceValidationRule"
}
}
};

Full list of features:
Hello everyone, today we will show you another great Magento 2 article on how to add custom validation to checkout.
Writing is a part of my life and I’m living for it.
BSS Commerce is one of the leading Magento extension providers and web development services in the world. With experienced and certified Magento developers, we commit to bringing high-quality products and services to optimize your business effectively. Furthermore, we offer FREE Installation – FREE 1-year Support and FREE Lifetime Update for every Magento extension.
<script type="text/x-magento-init">
{
"*": {
"bsscommerceMethod": {
"param": "paramvalue"
}
}
}
</script>

In this article, we have shown you a full guide on how to add Magento 2 custom validation to checkout.
php bin/magento cache:flush
php bin/magento setup:static-content:deploy

And with this extension, you can manage your checkout custom fields at ease.
Now let’s use this rule in the checkout form.
Magento 2 Checkout Custom Field by BSS
Table of Contents
CONTACT NOW to let us know your problems. We are willing to support you every time.
You need to add a new method in data-validate attribute for the specific checkout field.
First, you need to create a new js file for adding a custom validation rule. 
define([
'jquery',
'jquery/ui',
'jquery/validate',
'mage/translate'
], function($){
'use strict';
return function() {
$.validator.addMethod(
"bsscommercevalidationrule",
function(value, element) {
//Perform your operation here and return the result true/false.
return true/false;
},
$.mage.__("Your validation message.")
);
}
});

Step 2: Register a new js file

Let’s create a file with the name bsscommerceValidationRule.js.
You can also segment customers to see custom fields. For example, If you have both B2B and B2C customers, you should personalize your checkout process for each customer group. Each group can see some different custom checkout fields.

Create a filerequirejs-config.js in app/code/<VendorName>/<ModuleName>/view/frontend/requirejs-config.js.

Then add the below code to the file:
To add Magento 2 custom validation to the checkout, you need to follow 4 steps:
<script type="text/x-magento-init">
{
"*": {
"bsscommerceMethod": {}
}
}
</script>

Thus, this feature can prevent customers from missing any information field in the checkout.
Here bsscommercevalidationrule is the name of our newly created validation rule.
The file path will be app/code/<Vendor-name>/<Module-name>/view/frontend/web/js/bsscommerceValidationRule.js.

• Add any number of Magento 2 custom fields to checkout
• Use those fields as Magento 2 order attributes to improve management
• Show custom fields  in the Order grid & on the Order Detail page
• Add Magento 2 order custom attributes to transaction emails and documents
• Get values of the created attributes via API

Conclusion

Adding custom validation to the checkout page is very helpful in many situations. If a customer hasn’t selected input for a required field on the checkout page, the validation event will be triggered before they click on Place Order. 
Then add the below code inside the filerequirejs-config.js.
We hope this blog is helpful and good luck to you!
The good news is that you can enable that feature with the help of your coding knowledge. So below are the steps and codes you need to follow to add Magento 2 custom validation to the checkout.

define([
'jquery',
'jquery/ui',
'jquery/validate',
'mage/translate'
], function($){
'use strict';
return function(param) {
console.log(param);
$.validator.addMethod(
"bsscommercevalidationrule",
function(value, element) {
//Perform your operation here and return the result true/false.
return true/false;
},
$.mage.__("Your validation message.")
);
}
});

Step 3: Apply the rule to the checkout fields

You have successfully added the new custom method in jquery validation.