☰
Trongate MX
Documentation

Help Improve Our Docs

If you’ve found an error, spotted something missing, or feel a section could be clearer or better explained, we’d love to hear from you. Your feedback helps keep the documentation accurate and useful for everyone.

Please report issues or suggest improvements on GitHub. Community input is invaluable in making the docs stronger.

Not comfortable with GitHub? No problem — you can also get in touch with us directly via our contact form. We welcome all feedback.

» » »
Error Animations

Error Animations

The mx-animate-error attribute triggers an error animation when an API endpoint returns an HTTP status code outside the 'success' range (i.e., not between 200 and 299).

Demonstration

Click the button below to see an example of an 'error' animation:

How It Works

The mx-animate-error attribute attaches an error animation to elements initiating HTTP requests, such as buttons or forms. When the request fails, users see an error animation, giving immediate feedback that the operation was unsuccessful.

Example

Here's how you can implement mx-animate-error:

For an HTML-only approach, here's the corresponding code:

Here's a PHP method that can be used to return an 'error' response:

Clicking the submit button sends a POST request to endpoint/submit_simulate_error. If the request fails (HTTP status outside 200-299), the error animation is displayed over the form.

Important: The mx-animate-error attribute must be added to the element initiating the HTTP request. Adding it to unrelated elements will not trigger the animation.

Syntax

The syntax for mx-animate-error is simple:

Setting the attribute value to "true" activates the animation.

Placement Rules

The placement of the error animation depends on the context:

  • Default: The animation appears inside the element that contains the mx-animate-error attribute.
  • Modals: If the element that contains the mx-animate-error attribute is inside a modal, the animation will be rendered within the containing modal body - temporarily hiding the entire contents of the modal body.

Tip: Use mx-animate-error alongside mx-post for a seamless combination of server-side operations and client-side feedback.

Advanced Example

Here's a practical example combining mx-animate-error with other MX attributes:

If you'd rather work directly with HTML, here's the code:

Building web applications using pure HTML forms introduces potential security risks. For more details, refer to our documentation pertaining to CSRF Protection

If in doubt, use Trongate's form helper functions whenever possible.

In this example:

  1. The form submits data to submit_data.
  2. Upon error, an error animation appears within the form.
  3. After a second or two, the animation disappears.
  4. The original form then reappears.

The 'autocomplete' attribute, when set to 'off' on a form's opening tag, prevents the browser from suggesting or automatically filling in previously entered values for any of the form fields. This is especially useful for forms that collect sensitive or unique information, as it ensures the browser won't try to pre-fill fields with stored data.

Things To Keep In Mind

  • The animation is purely client-side and does not confirm server-side changes.
  • It works with clickable elements such as buttons and form elements.
  • For advanced error handling, consider pairing with attributes like mx-redirect-on-error.

Best Practices:

  • Add mx-animate-error="true" to elements initiating HTTP requests.
  • Combine with mx-post for AJAX-driven forms or buttons.

Summary

The mx-animate-error attribute provides immediate feedback for failed operations. It can be used with buttons, forms, or modals, and works alongside other Trongate MX attributes to create interactive experiences.

×