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!

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. :)