I tried following this guide but when I test it, it is just triggering regular expression validation I want my to check postcode in API.
Here is the code in {module_name}/view/web/js/model/postalCode.js
define(
[
'jquery'
],
function ($) {
'use strict';
return {
/**
* Validate checkout agreements
*
* @returns {Boolean}
*/
validate: function () {
var zipValidationResult = false;
var zip = $('form[postcode]').val();
alert("WORKING" + zip);
console.log("WORKING");
return true;
}
};
}
);
Here us code in {module_name}/view/web/js/view/postalCode.js :
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/additional-validators',
'Sdu_CheckPostalCode/js/model/postalCode'
],
function (Component, additionalValidators, postalCode) {
'use strict';
additionalValidators.registerValidator(postalCode);
return Component.extend({});
}
);
And here is code in {module_name}/view/frontend/layout/checkout_index_index.xml:
<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="postalCode" xsi:type="array">
<item name="component" xsi:type="string">Sdu_CheckPostalCode/js/view/postalCode</item>
</item>
<!-- Declare your validation. END -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
