☰
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.

» » »
Form Validation and Error Handling

Form Validation and Error Handling

Displaying form validation errors with Trongate MX is an easy two-step process.

Step 1

  • Add a class of highlight-errors to your opening form tag.

Step 2

  • Modify your endpoint so that it invokes echo validation_errors(xxx); when validation errors occur.

NOTE: When invoking validation_errors(), replace xxx with an appropriate error status code, such as 400.

Understanding Different Types of Form Responses

Trongate MX handles form submissions differently based on the HTTP status code returned by the server:

Form Validation Errors (400, 422, etc.)

When validation errors occur and the form has the highlight-errors class, Trongate MX will:

  • Parse the JSON response containing validation errors
  • Display these errors inline next to the relevant form fields
  • Handle the response according to normal validation error protocols

Security-Related Responses (401, 402, 403)

For security-related status codes (unauthorized, payment required, or forbidden), Trongate MX will:

  • Skip the validation error handling process
  • Allow other error handling attributes like mx-redirect-on-error or mx-on-error to take effect

This means you can handle authentication failures, session timeouts, or CSRF protection failures using standard Trongate MX attributes. For example:

If the server returns a 401 status code (e.g., due to an expired session), Trongate MX will process the redirect instead of trying to display validation errors. Similarly, you could use mx-on-error to display a custom "Session Expired" message.

Video Tutorial

Below is a short video tutorial demonstrating how to add form validation errors when working with Trongate MX.

Tutorial Resources

The starter code for the video tutorial is available on GitHub. Click the button below to access the repository and download the starter code.

Get Starter Code

Prerequisites

To use Trongate's built-in form validation features with Trongate MX, ensure your webpage includes the following:

  1. A base element inside the <head> section with its value set to your website's base URL.
  2. A link element inside the <head> section that loads trongate.css.
  3. Opening and closing script tags with the src attribute pointing to js/trongate-mx.js. *

* The script tag for loading Trongate MX can be placed either in the <head> section or just before the closing </body> tag.

Here's an example of a basic HTML template ready to work with Trongate MX:

When using Trongate's Validation class for form validation, ensure your forms are closed with:

This is essential because Trongate's Validation class automatically applies CSRF protection to all incoming requests. Using form_close() not only generates a closing form tag but also creates the necessary security token required for Trongate's CSRF protection mechanisms.

Failing to use form_close() will result in rejected requests due to Trongate's stringent security protocols.

Summary

The ability to dynamically render inline form validation errors with just two lines of code is arguably one of Trongate MX's most impressive features.

Ask yourself:

"How long would it take to build this kind of functionality without Trongate MX?"

Even for an experienced developer, building such functionality would almost certainly take several hours or would require depending upon third-party libraries.

What truly sets Trongate MX apart is that it allows you to leverage Trongate's Validation class, security features, and form helpers - all out of the box. Not only can you build beautiful, highly interactive single-page applications without writing JavaScript, but you can also do so without relying on any third-party libraries!

And there's more!

With Trongate MX, it's also possible to invoke your own custom JavaScript functions after validation errors have occurred. Full details on how to take advantage of this functionality are covered on the next page.

×