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 are displayed.
Usage
Here's a simple example showing how to use the mx-after-validation attribute:
When the form is submitted with invalid data, Trongate MX automatically displays validation errors next to the relevant form fields. Once these errors are displayed, the showErrorCount function is called. In this example, it counts the validation errors and displays a summary message to help users understand how many issues need to be addressed.
Alternative Syntax
If you prefer working directly with HTML instead of using Trongate's form helpers, here's the equivalent code:
More Examples
Custom Error Styling
You might want to draw attention to validation errors when they appear. Here's how you can temporarily make erroneous fields blink:
Understanding the customEvent Parameter
When Trongate MX calls your validation handler function, it passes a customEvent parameter containing useful information about the validation event. The customEvent.detail object includes:
element: The form element that triggered the validationoriginalEvent: The original form submission event
You only need to include this parameter if you plan to use this contextual information in your handler function.
Analytics and Error Tracking
You can use mx-after-validation to track validation errors for analytics or debugging purposes. This example demonstrates using the customEvent parameter to access form information:
- Validation Context: The function receives a customEvent parameter with validation details
- Error Elements: Use
.form-field-validation-errorto find invalid fields - Error Messages: Find error messages in
.validation-error-reportelements - User Experience: Focus on helping users correct their input efficiently
Summary
The mx-after-validation attribute provides a powerful way to customize how your application handles form validation errors. By executing JavaScript after validation errors are displayed, you can enhance the user experience with custom animations, helpful UI behaviors, and error tracking capabilities. This makes form validation more user-friendly and helps you maintain better insight into validation issues in your application.