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:
<?php
$form_attributes = [
'class' => 'highlight-errors',
'mx-post' => 'api/users/create',
'mx-after-validation' => 'show_error_count'
];
echo form_open('#', $form_attributes);
echo '<div id="error-summary"></div>';
echo form_input('username');
echo form_input('email');
echo form_submit('submit', 'Create User');
echo form_close();
?>
<script>
function show_error_count() {
const error_fields = document.querySelectorAll('.form-field-validation-error');
const error_summary = document.getElementById('error-summary');
const count = error_fields.length;
error_summary.innerHTML = `<div class="alert alert-danger">
Please correct the ${count} error${count !== 1 ? 's' : ''} below.
</div>`;
}
</script>
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:
<form class="highlight-errors"
mx-post="api/users/create"
mx-after-validation="show_error_count">
<div id="error-summary"></div>
<input type="text" name="username">
<input type="email" name="email">
<button type="submit">Create User</button>
</form>
<script>
function show_error_count() {
const error_fields = document.querySelectorAll('.form-field-validation-error');
const error_summary = document.getElementById('error-summary');
const count = error_fields.length;
error_summary.innerHTML = `<div class="alert alert-danger">
Please correct the ${count} error${count !== 1 ? 's' : ''} below.
</div>`;
}
</script>
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:
<?php
$form_attributes = [
'class' => 'highlight-errors',
'mx-post' => 'api/products/create',
'mx-after-validation' => 'highlight_errors'
];
echo form_open('#', $form_attributes);
echo form_input('product_name');
echo form_textarea('description');
echo form_submit('submit', 'Add Product');
echo form_close();
?>
<script>
function highlight_errors() {
const error_fields = document.querySelectorAll('.form-field-validation-error');
error_fields.forEach(field => {
field.classList.add('blink');
});
setTimeout(() => {
error_fields.forEach(field => {
field.classList.remove('blink');
});
}, 3000);
}
</script>
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:
<?php
$form_attributes = [
'class' => 'highlight-errors',
'mx-post' => 'api/orders/submit',
'mx-after-validation' => 'track_validation_errors'
];
echo form_open('#', $form_attributes);
// Add your form fields here
echo form_close();
?>
<script>
function track_validation_errors(customEvent) {
const error_fields = document.querySelectorAll('.form-field-validation-error');
const error_messages = document.querySelectorAll('.validation-error-report');
const error_data = {
timestamp: new Date().toISOString(),
form_id: customEvent.detail.element.id,
error_count: error_fields.length,
fields: Array.from(error_fields).map(field => field.name)
};
// Example only - replace with your own analytics logic
console.log('Tracking validation error:', error_data);
// send_to_analytics('form_validation_error', error_data);
}
</script>
- Validation Context: You can access validation context via the
customEvent object
- Error Elements: Target fields with
.form-field-validation-error
- Error Messages: Look for
.validation-error-report elements
- 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.