How to move the field error element “.Mage-error” outside of the “.field” element? Magento 2.2

Question

I am new to Magento, and am using Magento 2.2.

How can we move the error message that is generated to the outside of it's field parent. Please note that I am looking for a way to do it through my custom theme. Please see the screenshot for clarification.

Answer 1

I have found the way to do this. I am sharing the answer to my question in case someone needs to do this:

1. Create a folder called mage in your custom template with the following path:

/Sample/CustomTemplate/web/mage

2. Place a copy of the file validation.js in this new mage folder. You can find a copy of the original validation.js in the following path:

/Magento Folder/lib/web/validation.js

3. In my case, I wanted to move the .mage-error outside of the .field element, so I replace the following code:

   fieldWrapper = element.closest('.addon');
   

   with

   fieldWrapper = element.closest('.field');