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.
After Validation Operations
The mx-after-validation attribute in Trongate MX allows you to execute custom JavaScript functions immediately after form validation errors have been displayed. This opens the door to all kinds of powerful, user-friendly interactions.
Usage
Here's a simple example showing how to use the mx-after-validation attribute:
In this example, the show_error_count function is automatically called after validation errors appear. It simply counts how many validation issues were found and displays a summary message. It's a helpful way to guide users through corrections.
Alternative Syntax
If you prefer working directly with raw HTML rather than Trongate's form helper functions, you can still use mx-after-validation like this:
More Examples
Custom Error Styling
Want to draw attention to fields with validation issues? Here's a fun example that makes invalid fields briefly blink. It's just a demonstration - in real-world projects, you could use this feature to trigger animations, focus fields, show tooltips, and more:
Understanding the customEvent Parameter
When Trongate MX calls your validation handler function, it passes a customEvent object that contains valuable context. You can access it like this:
customEvent.detail.element- the form element that triggered validationcustomEvent.detail.originalEvent- the original submit event
Include this parameter in your function if you want access to the event context. Otherwise, it's optional.
Analytics and Error Tracking
Here’s a more advanced example showing how you might use mx-after-validation for analytics. It logs validation failures and could be wired up to your own analytics service:
- Validation Context: You can access validation context via the
customEventobject - Error Elements: Target fields with
.form-field-validation-error - Error Messages: Look for
.validation-error-reportelements - Use Cases: Animate errors, log events, scroll to invalid fields, trigger alerts, disable buttons, or even guide users with voice feedback!
Summary
The mx-after-validation attribute provides an elegant, declarative way to respond to form validation errors. Whether you're flashing fields, logging metrics, or guiding users with messages - Trongate MX puts the full power of JavaScript at your fingertips right after validation errors appear. The examples shown here are just the beginning.