Skip to content
Search Articles/

less than a minute read • Updated 9 minutes ago

Handle checkout errors and inline validation

How Foxy highlights invalid checkout fields, updates the error notification bar, and fires events you can hook into for custom error handling.

Customize how Foxy highlights fields, updates the error bar, and fires events when a checkout field has a validation error.

Required fields generate an error if a customer tabs off of them without filling them in. Inline errors have three independent parts, so you can use one, two, or all three depending on what you need.

1. Field highlighting

The specific field is highlighted by adding a class to an element, controlled through data attributes:

  • data-fc-error-class — required to use inline-error highlighting. Defines the class added to the element when it has an error. If this attribute isn’t found, Foxy falls back to re-rendering the block instead, which is more expensive from a browser performance perspective.

  • data-fc-error-for — needed only if you want the error class applied to an element other than the input itself, such as a parent element. Its value is the name of the input. Not required if data-fc-error-class is on the input directly.

For example, on the shipping last name field’s parent element:

data-fc-error-class="invalid" data-fc-error-for="shipping-last-name"

When there’s an error, the invalid class is added; once resolved, it’s removed the same way — Foxy checks the input for data-fc-error-class and removes the class if present, then checks for a matching data-fc-error-for and removes the class there too, if present.

data-fc-error-class can also take a second, comma-separated class to toggle on success:

<div class="alert alert-danger"
    data-fc-error-for="cc_cvv2"
    data-fc-error-class="show,hidden"></div>

This adds show and removes hidden on error, and toggles both back when the error clears.

2. Error bar updating

Once field markup updates, Foxy updates a notifier bar at the top of the page — if one is present. The default checkout markup looks like this:

<section data-fc-error-notifier>
  <h3 data-fc-notifier-text></h3>
</section>

  • data-fc-error-notifier — needs no value; tells Foxy to add all error messages to this element.

  • data-fc-notifier-text — optional; specifies which element receives the message text. By default the message is appended as a <p>.

When a message is sent to the notifier, Foxy checks the length of FC.JSON.messages.errors and, if errors are present, updates the count and adds the alert alert-danger classes. Appearance and animation are controlled entirely through CSS.

3. Error event firing

Foxy fires a notificationUpdate jQuery event on the <body> tag every time a message is added to or removed from FC.JSON.messages.errors. Listen for this event to build your own custom alerting, such as a toast notification library.

Notes

  • These three parts are independent — use any combination that fits your customization.

Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.