Fixing missing error messages & missing red borders on invalid inputs

[raidsrc]

Hi Medusa team. Thanks for the hard work on all you've been doing. I've been building with it for a few months and it's been great.

There are a couple of quick, simple fixes in this PR. First, I noticed that red error messages weren't appearing underneath invalid inputs. Then, secondly, as I was fixing the first issue, I noticed that red borders around input boxes were not appearing when users made invalid inputs. Error messages and red borders for invalid inputs were not features that I added myself, or had the idea of adding—they were features that were already present in the storefront starter, but were broken in some way, and needed fixing.

Here's a series of videos demonstrating the error and showing off the solution.

https://github.com/medusajs/nextjs-starter-medusa/assets/20936991/6507225e-ed17-4cbf-9df5-bda067b43e94
https://github.com/medusajs/nextjs-starter-medusa/assets/20936991/858f74a9-b5e1-4e69-8229-8f40fd741ded

The first commit is really simple. The email input field on the checkout page in the shipping address section never showed an error message for improperly formatted email addresses, so I took a look at it. The react-hook-form pattern property was missing a message to show to the user, so I changed it to an object containing the value of the pattern to check against (the emailRegex) and an appropriate message ("Email address is invalid").

The second commit is on the component. It turns out that get() from react-hook-form did nothing (returned undefined all the time), so I got rid of it. This is why hasError and the boolean comparisons with hasError never worked. Instead, I used Lodash's get() method to check for the name of the input on the errors object. If the name is present on the errors object, there is an error with the input field, and the whole condition returns true, turning the border red. Otherwise, it's false, and the border won't be red. Also, the component will appear and disappear on its own depending on whether or not there's an error with the input, so there is no need to try and control whether or not it renders with &&.

I've tested this stuff out and it works with the input fields on shipping address, billing address, login, and register. I think that's all of them.

I didn't see any contribution rules on this repo so I just tried to make everything simple and clear and do my best to follow common-sense contribution guidelines. This is also my first time contributing code to an open-source repo. Hopefully everything is up to snuff.

[vercel]

Someone is attempting to deploy a commit to the medusajs Team on Vercel.

A member of the Team first needs to authorize it.