Magento2: How to change the Shipping Address Form validation message?

Question

I want to change the shipping address form validation message(Just want to replace : 'This field required' to 'Enter FirstName') in magento2

enter image description here

I want to change the below validation message text how can i fo that?

• Vardhman Kamani: @sumit if you know please help me
• Vardhman Kamani: @hassan ali Shahzad if you know please help me
• Hassan Ali Shahzad: I don't have M2 instance at the moment can you screen short this portion here with amendments on it ? What actually you want.
• Oscprofessionals: Yes, you can go thorough this link: mageplaza.com/devdocs/… may this help you
• Vardhman Kamani: I update the asnwer @HassanAliShahzad

Answer 1

Create Module and Make Ajax Request as from your Module and Validate in Theme through JS. I will share you some piece of my code. This Code have validate only Postcode(Pincode), you can manipulate it.

Path: OSCP/ModuleName/Controller/Ajax/CheckPincode.php

<?php
namespace OSCP/ModuleName\Controller\Ajax;
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;
use Magento\Framework\View\Result\PageFactory;
use MM\ShippingType\Model\LocalPincode;
use Magento\Checkout\Model\Cart;
use Magento\Catalog\Model\ResourceModel\Product\CollectionFactory as ProductCollectionFactory;
class CheckPincode extends Action
{
 protected $resultPageFactory;
 protected $_storeManager;
 protected $resultRedirectFactory;
 protected $_localPincode;
 protected $_cart;
 protected $_localPostcode;
 public function __construct(
 Context $context,
 PageFactory $resultPageFactory,
 \Magento\Framework\Controller\Result\RedirectFactory $resultRedirectFactory,
 LocalPincode $localPincode,
 Cart $cart,
 ProductCollectionFactory $productCollectionFactory
 ) {
 parent::__construct($context);
 $this->resultPageFactory = $resultPageFactory;
 $this->resultRedirectFactory = $resultRedirectFactory;
 $this->_localPincode = $localPincode;
 $this->_cart = $cart;
 $this->_productCollectionFactory = $productCollectionFactory;
 }
 public function execute()
 {
 $postcode = $this->getRequest()->getParam('pincode');
 $localPostCode = $this->_localPincode->isLocalPostcode($postcode);
 $response = [];
 if (!$localPostCode) {
 $response = ['error' => true, 'message' => 'Sorry, we don\'t deliver to that postcode - please call us for a quote.'];
 }
 echo json_encode($response);
 exit;
 }
}

Path: app/design/frontend/VendorName/ThemeName/Magento_Checkout/web/js/view/shipping.js

define([
 'jquery',
 'underscore',
 'Magento_Ui/js/form/form',
 'ko',
 'Magento_Customer/js/model/customer',
 'Magento_Customer/js/model/address-list',
 'Magento_Checkout/js/model/address-converter',
 'Magento_Checkout/js/model/quote',
 'Magento_Checkout/js/action/create-shipping-address',
 'Magento_Checkout/js/action/select-shipping-address',
 'Magento_Checkout/js/model/shipping-rates-validator',
 'Magento_Checkout/js/model/shipping-address/form-popup-state',
 'Magento_Checkout/js/model/shipping-service',
 'Magento_Checkout/js/action/select-shipping-method',
 'Magento_Checkout/js/model/shipping-rate-registry',
 'Magento_Checkout/js/action/set-shipping-information',
 'Magento_Checkout/js/model/step-navigator',
 'Magento_Ui/js/modal/modal',
 'Magento_Checkout/js/model/checkout-data-resolver',
 'Magento_Checkout/js/checkout-data',
 'uiRegistry',
 'mage/translate',
 'Magento_Checkout/js/model/shipping-rate-service'
], function (
 ,ドル
 _,
 Component,
 ko,
 customer,
 addressList,
 addressConverter,
 quote,
 createShippingAddress,
 selectShippingAddress,
 shippingRatesValidator,
 formPopUpState,
 shippingService,
 selectShippingMethodAction,
 rateRegistry,
 setShippingInformationAction,
 stepNavigator,
 modal,
 checkoutDataResolver,
 checkoutData,
 registry,
 $t
) {
 'use strict';
 var popUp = null;
 return Component.extend({
 defaults: {
 template: 'Magento_Checkout/shipping',
 shippingFormTemplate: 'Magento_Checkout/shipping-address/form',
 shippingMethodListTemplate: 'Magento_Checkout/shipping-address/shipping-method-list',
 shippingMethodItemTemplate: 'Magento_Checkout/shipping-address/shipping-method-item'
 },
 visible: ko.observable(!quote.isVirtual()),
 errorValidationMessage: ko.observable(false),
 isCustomerLoggedIn: customer.isLoggedIn,
 isFormPopUpVisible: formPopUpState.isVisible,
 isFormInline: addressList().length === 0,
 isNewAddressAdded: ko.observable(false),
 saveInAddressBook: 1,
 quoteIsVirtual: quote.isVirtual(),
 /**
 * @return {exports}
 */
 initialize: function () {
 var self = this,
 hasNewAddress,
 fieldsetName = 'checkout.steps.shipping-step.shippingAddress.shipping-address-fieldset';
 this._super();
 if (!quote.isVirtual()) {
 stepNavigator.registerStep(
 'shipping',
 '',
 $t('Shipping'),
 this.visible, _.bind(this.navigate, this),
 10
 );
 }
 checkoutDataResolver.resolveShippingAddress();
 hasNewAddress = addressList.some(function (address) {
 return address.getType() == 'new-customer-address'; //eslint-disable-line eqeqeq
 });
 this.isNewAddressAdded(hasNewAddress);
 this.isFormPopUpVisible.subscribe(function (value) {
 if (value) {
 self.getPopUp().openModal();
 }
 });
 quote.shippingMethod.subscribe(function () {
 self.errorValidationMessage(false);
 });
 registry.async('checkoutProvider')(function (checkoutProvider) {
 var shippingAddressData = checkoutData.getShippingAddressFromData();
 if (shippingAddressData) {
 checkoutProvider.set(
 'shippingAddress',
 $.extend(true, {}, checkoutProvider.get('shippingAddress'), shippingAddressData)
 );
 }
 checkoutProvider.on('shippingAddress', function (shippingAddrsData) {
 checkoutData.setShippingAddressFromData(shippingAddrsData);
 });
 shippingRatesValidator.initFields(fieldsetName);
 });
 return this;
 },
 /**
 * Navigator change hash handler.
 *
 * @param {Object} step - navigation step
 */
 navigate: function (step) {
 step && step.isVisible(true);
 },
 /**
 * @return {*}
 */
 getPopUp: function () {
 var self = this,
 buttons;
 if (!popUp) {
 buttons = this.popUpForm.options.buttons;
 this.popUpForm.options.buttons = [
 {
 text: buttons.save.text ? buttons.save.text : $t('Save Address'),
 class: buttons.save.class ? buttons.save.class : 'action primary action-save-address',
 click: self.saveNewAddress.bind(self)
 },
 {
 text: buttons.cancel.text ? buttons.cancel.text : $t('Cancel'),
 class: buttons.cancel.class ? buttons.cancel.class : 'action secondary action-hide-popup',
 /** @inheritdoc */
 click: this.onClosePopUp.bind(this)
 }
 ];
 /** @inheritdoc */
 this.popUpForm.options.closed = function () {
 self.isFormPopUpVisible(false);
 };
 this.popUpForm.options.modalCloseBtnHandler = this.onClosePopUp.bind(this);
 this.popUpForm.options.keyEventHandlers = {
 escapeKey: this.onClosePopUp.bind(this)
 };
 /** @inheritdoc */
 this.popUpForm.options.opened = function () {
 // Store temporary address for revert action in case when user click cancel action
 self.temporaryAddress = $.extend(true, {}, checkoutData.getShippingAddressFromData());
 };
 popUp = modal(this.popUpForm.options, $(this.popUpForm.element));
 }
 return popUp;
 },
 /**
 * Revert address and close modal.
 */
 onClosePopUp: function () {
 checkoutData.setShippingAddressFromData($.extend(true, {}, this.temporaryAddress));
 this.getPopUp().closeModal();
 },
 /**
 * Show address form popup
 */
 showFormPopUp: function () {
 this.isFormPopUpVisible(true);
 },
 /**
 * Save new shipping address
 */
 saveNewAddress: function () {
 var addressData,
 newShippingAddress;
 var thisvar = this;
 this.source.set('params.invalid', false);
 this.triggerShippingDataValidateEvent();
 if (!this.source.get('params.invalid')) {
 addressData = this.source.get('shippingAddress');
 // if user clicked the checkbox, its value is true or false. Need to convert.
 addressData['save_in_address_book'] = this.saveInAddressBook ? 1 : 0;
 var pincode = addressData.postcode;
 $(".error-txt").remove();
 $.ajax({
 url: '/shippingtype/ajax/checkpincode',
 type: 'POST',
 showLoader: true,
 data: {pincode:pincode},
 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
 $('#co-shipping-form input[name=postcode]').after('<span class="error-txt" style="color: red;">'+responseText.message+'</span>');
 return false;
 } else {
 newShippingAddress = createShippingAddress(addressData);
 selectShippingAddress(newShippingAddress);
 checkoutData.setSelectedShippingAddress(newShippingAddress.getKey());
 checkoutData.setNewCustomerShippingAddress($.extend(true, {}, addressData));
 //this.getPopUp().closeModal();
 thisvar.getPopUp().closeModal();
 thisvar.isNewAddressAdded(true);
 return true;
 }
 }
 });
 }
 },
 /**
 * Shipping Method View
 */
 rates: shippingService.getShippingRates(),
 isLoading: shippingService.isLoading,
 isSelected: ko.computed(function () {
 return quote.shippingMethod() ?
 quote.shippingMethod()['carrier_code'] + '_' + quote.shippingMethod()['method_code'] :
 null;
 }),
 /**
 * @param {Object} shippingMethod
 * @return {Boolean}
 */
 selectShippingMethod: function (shippingMethod) {
 selectShippingMethodAction(shippingMethod);
 checkoutData.setSelectedShippingRate(shippingMethod['carrier_code'] + '_' + shippingMethod['method_code']);
 return true;
 },
 /**
 * Set shipping information handler
 */
 setShippingInformation: function () {
 /*if (this.validateShippingInformation()) {
 setShippingInformationAction().done(
 function () {
 stepNavigator.next();
 }
 );
 }*/
 if (!this.source.get('params.invalid')) {
 var shippingAdd = this.source.get('shippingAddress');
 //var shippingAdd = quote.shippingAddress();
 var thisObj = this;
 var pincode = shippingAdd.postcode;
 if ($("#co-shipping-form").length && pincode) {
 $(".error-txt").remove();
 $.ajax({
 url: '/shippingtype/ajax/checkpincode',
 type: 'POST',
 data: {pincode: pincode},
 complete: function (response) {
 var res = JSON.parse(JSON.stringify(response));
 var responseText = JSON.parse(res.responseText);
 $(".error-txt").remove();
 if (responseText.error == true) {
 // Display error message exactly after pincode textbox
 $('#co-shipping-form input[name=postcode]').after('<span class="error-txt" style="color: red;">' + responseText.message + '</span>');
 return false;
 }
 }
 });
 }
 // Call validate shipping function only when your pincode is valid
 if (thisObj.validateShippingInformation()) {
 setShippingInformationAction().done(
 function () {
 stepNavigator.next();
 }
 );
 }
 }
 },
 /**
 * @return {Boolean}
 */
 validateShippingInformation: function () {
 var shippingAddress,
 addressData,
 loginFormSelector = 'form[data-role=email-with-possible-login]',
 emailValidationResult = customer.isLoggedIn(),
 field;
 if (!quote.shippingMethod()) {
 this.errorValidationMessage($t('Please specify a shipping method.'));
 return false;
 }
 if (!customer.isLoggedIn()) {
 $(loginFormSelector).validation();
 emailValidationResult = Boolean($(loginFormSelector + ' input[name=username]').valid());
 }
 if (this.isFormInline) {
 this.source.set('params.invalid', false);
 this.triggerShippingDataValidateEvent();
 if (emailValidationResult &&
 this.source.get('params.invalid') ||
 !quote.shippingMethod()['method_code'] ||
 !quote.shippingMethod()['carrier_code']
 ) {
 this.focusInvalid();
 return false;
 }
 shippingAddress = quote.shippingAddress();
 addressData = addressConverter.formAddressDataToQuoteAddress(
 this.source.get('shippingAddress')
 );
 //Copy form data to quote shipping address object
 for (field in addressData) {
 if (addressData.hasOwnProperty(field) && //eslint-disable-line max-depth
 shippingAddress.hasOwnProperty(field) &&
 typeof addressData[field] != 'function' &&
 _.isEqual(shippingAddress[field], addressData[field])
 ) {
 shippingAddress[field] = addressData[field];
 } else if (typeof addressData[field] != 'function' &&
 !_.isEqual(shippingAddress[field], addressData[field])) {
 shippingAddress = addressData;
 break;
 }
 }
 if (customer.isLoggedIn()) {
 shippingAddress['save_in_address_book'] = 1;
 }
 selectShippingAddress(shippingAddress);
 }
 if (!emailValidationResult) {
 $(loginFormSelector + ' input[name=username]').focus();
 return false;
 }
 return true;
 },
 /**
 * Trigger Shipping data Validate Event.
 */
 triggerShippingDataValidateEvent: function () {
 this.source.trigger('shippingAddress.data.validate');
 if (this.source.get('shippingAddress.custom_attributes')) {
 this.source.trigger('shippingAddress.custom_attributes.data.validate');
 }
 }
 });
});