Magento 2.2.4 Show error message returned by plugin

Question

I'm beginner to Magento2 and I want to validate pincode which exists in custom table or not on Checkout page (www.test.com/checkout/), according to that I want to display error message on same page. Following is sample code of my plugin:

public function beforeSaveAddressInformation(
 \Magento\Checkout\Model\ShippingInformationManagement $subject,
 $cartId, 
 \Magento\Checkout\Api\Data\ShippingInformationInterface $addressInformation
) {
 $shippingAddress = $addressInformation->getShippingAddress();
 $pincode = $shippingAddress->getPostcode();
 $enable = $this->helper->getIsEnable();
 $checkAddToCart = $this->helper->getIsCheckonAddtoCart();
 if ($enable && $checkAddToCart && $pincode) {
 $pincodeStatus = $this->helper->getPincodeStatus($pincode);
 if(!$pincodeStatus) {
 // Following error message want to show on checkout page
 throw new InputException(__($this->helper->getFailMessage()));
 exit;
 }
 }
}

Can anyone let me know is there any way to display standard error message thrown through plugin using Magento2 Standards. Or else I have to use custom jquery validation rule on Checkout page? if I have to use custom jquery validation rule, then let me know how can I apply jquery validation rule on Checkout page, please elaborate in brief.

Thanks in advance!

• Kalyan Chakravarthi V: Hi, I suggest creating a new question for "Also let me know how can I apply jquery validation rule on Checkout page, please elaborate in brief". Never club multiple questions into one. This is a bad practice according to StackExchange policies. meta.stackexchange.com/questions/222735/… Please edit your question.

Answer 1

After so much investigation and implementation, I found a solution to display custom error message on checkout page.

1) Override a shipping.js file (vendor\magento\module-checkout\view\frontend\web\js\view\shipping.js) into your custom theme (app\design\frontend\Vendor\Theme\Module_Checkout\web\js\view\shipping.js):

2) Add your ajax call into setShippingInformation() function as follows:

 /**
 * Set shipping information handler
 */
 setShippingInformation: function () {
 var shippingAdd = quote.shippingAddress();
 var thisObj = this;
 $.ajax({
 url: '/pincodechecker/ajax/checkpincode',
 type: 'POST',
 data: 'pincode=' + shippingAdd.postcode,
 complete: function(response) {
 var res = JSON.parse(JSON.stringify(response));
 var responseText = JSON.parse(res.responseText);
 if (responseText.error === true) {
 // Display error message exactly after pincode textbox
 $(".message.warning").addClass("error").removeClass("warning");
 $(".message.error").html(responseText.message);
 return false;
 }
 else {
 // Call validate shipping function only when your pincode is valid
 if (thisObj.validateShippingInformation()) {
 setShippingInformationAction().done(
 function () {
 stepNavigator.next();
 }
 );
 }
 }
 }
 });
 },

3) Check pincode valid or not using ajax call (Namepsace/PincodeChecker/Controller/Ajax/CheckPincode) as follows:

public function execute() { 
 $response = ['error' => false, 'message' => ''];
 ....
 // Add your pincode validation logic
 ....
 if (!$valid) {
 $response = ['error' => true, 'message' => 'Pincode is invalid!'];
 }
 echo json_encode($response); // return response to ajax call in js file
}

4) Delete var folder, delete files and folder from pub/static/frontend/

5) Run php bin/magento setup:static-content:deploy -f in terminal.

I hope this solution may help to anyone. :)

• Sanchit Gupta: Thank you so much for hint +1. However I have override the file using "mixins" using magento.stackexchange.com/a/128296/35223