How can I add custom js validation to my cart estimate page for the zipcode?
The default Magento 2 behavior is that, on any change in pincode field, the prediction action starts and a spinner is shown, even if my pincode is incomplete or invalid. So, how can I add custom validation to my pincode code and trigger the action only when the pin is valid?
I have followed the devdocs and added the shipping rate validator and shipping rate rules but the console log inside the view file is working but not being called inside the model js file.
https://developer.adobe.com/commerce/php/tutorials/frontend/custom-checkout/add-carrier-validation/
Here is the code snippest I have shared
view/frontend/web/js/model/shipping-rates-validation-rules.js
define([], function () {
'use strict';
return {
/**
* @return {Object}
*/
getRules: function () {
return {
'postcode': {
'required': true,
'validate_zip': true
}
};
}
};
});
view/frontend/web/js/model/shipping-rates-validator.js
validate: function (address) {
var self = this;
this.validationErrors = [];
$.each(validationRules.getRules(), function (field, rule) {
var message, regionFields;
if (rule.required && utils.isEmpty(address[field])) {
message = $t('Field ') + field + $t(' is required.');
regionFields = ['region', 'region_id', 'region_id_input'];
if (
$.inArray(field, regionFields) === -1 ||
utils.isEmpty(address.region) && utils.isEmpty(address['region_id'])
) {
self.validationErrors.push(message);
}
}else if (rule.validate_zip) {
var zip = address[field];
console.log("Zip Validator inside custom validation",zip);
}
});
console.log("Zip Validator before retun");
return !this.validationErrors.length;
}
view/frontend/web/js/view/shipping-rates-validation.js
define([
'uiComponent',
'Magento_Checkout/js/model/shipping-rates-validator',
'Magento_Checkout/js/model/shipping-rates-validation-rules',
'../../model/shipping-rates-validator',
'../../model/shipping-rates-validation-rules'
], function (Component,
defaultShippingRatesValidator,
defaultShippingRatesValidationRules,
customShippingRatesValidator,
customShippingRatesValidationRules) {
'use strict';
defaultShippingRatesValidator.registerValidator('customship', customShippingRatesValidator);
defaultShippingRatesValidationRules.registerRules('customship', customShippingRatesValidationRules);
console.log('in the view/customship');
return Component.extend({});
can someone help me on this?
