Create error messages underneath required entries on customer log in pages

Store Design
, , ,

Topic summary

Request to change form validation behavior on seraneeva.com so required-field errors appear directly beneath the specific input, rather than as a red alert box at the top.

  • Scope: Customer login, create account, and forgot password pages.
  • Desired outcome: Inline error message under the relevant field, matching the attached screenshot’s styling and wording, including a period at the end.
  • Technical context: Likely involves customizing HTML templates and CSS for form validation and error placement; potentially adjusting how the site’s validation logic renders errors (inline vs. global).
  • Evidence: An attached image is central to understanding the exact layout and presentation required.
  • Status: No solutions or code provided yet; seeking implementation guidance.
  • Open questions: How to hook into the current validation system to render field-specific error messages; which files or theme components control error rendering on these pages.
Summarized with AI on December 27. AI used: gpt-5.
1

Hi guys,

Website: seraneeva.com

Rather than having the red box pop up at the top of the log in, create account, and forgot your password pages when required entries aren’t filled out, how can I have the message pop up below the box that was required? Exactly like the attached pic and with a period at the end.

Screenshot 2024-06-09 at 9.52.40 AM.png
Screenshot 2024-06-09 at 9.52.40 AM.png784×184 3.43 KB