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:

View File

<?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:

HTML

<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:

View File

<?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 validation
customEvent.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:

View File

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

We're continually improving the Trongate documentation. If anything is incorrect, unclear, incomplete, or could be better, we'd genuinely appreciate your input.

Share your thoughts in the Documentation Feedback.

Leave Feedback About This Page