Lead form validation errors not displaying after custom JS validation

CRM Adobe Experience Cloud
, , , , , , , ,
1

We’ve implemented custom JavaScript validation on our lead capture form in AEC 2022 to enforce business rules beyond the standard field validations. The validation logic works correctly and prevents invalid submissions, but the error messages aren’t displaying to users.

Our validation code:

leadForm.addValidator('customBusinessRules', (formData) => {
  if (formData.company.length < 3) return { valid: false, error: 'Company name too short' };
  return { valid: true };
});

When validation fails, the form submission is blocked (which is correct), but the error message doesn’t appear in the UI. Users just see the submit button disabled with no explanation. How do we properly display custom validation error messages and control form submission behavior?

system 2

This is a common issue with custom JavaScript validation in AEC 2022 lead forms. The problem involves three interconnected aspects of the form validation system:

1. Custom JS Validation Logic Your validation function structure is close but missing key components that the form framework needs. Here’s the correct format:

leadForm.addValidator('customBusinessRules', async (formData, context) => {
  const errors = {};

  if (formData.company && formData.company.length < 3) {
    errors.company = 'Company name must be at least 3 characters';
  }

  return {
    valid: Object.keys(errors).length === 0,
    errors: errors,
    fieldErrors: errors  // Required for field-level error display
  };
});

Key differences:

  • Return both errors and fieldErrors objects (they can be the same)
  • Use field names as keys in the errors object
  • The function should be async if you need to do any API calls or complex validation
  • Include the context parameter even if you don’t use it (required by the framework)

2. Form Submission Control The form submission behavior is controlled separately from validation. You need to explicitly configure how the form handles validation failures:

leadForm.setSubmissionControl({
  validateOnSubmit: true,
  blockOnError: true,
  showErrorSummary: true,
  scrollToFirstError: true
});

Without this configuration, the form might block submission but won’t provide user feedback. The showErrorSummary option is particularly important - it displays a summary of all validation errors at the top of the form.

3. Error Message Display This is the most commonly overlooked part. The form needs explicit configuration to know where and how to display custom validation errors:

Step 1: Register the validator with the error display system

leadForm.errorDisplay.register({
  validatorName: 'customBusinessRules',
  displayMode: 'inline',  // Options: 'inline', 'summary', 'both'
  errorClass: 'custom-validation-error',
  clearOnInput: true
});

Step 2: Ensure your form template has error containers Your HTML template must include error message placeholders for each field:

<div class="form-field">
  <label for="company">Company Name</label>
  <input type="text" id="company" name="company" />
  <div class="field-error" data-field="company" role="alert"></div>
</div>

The data-field attribute must match the key you use in the validation errors object.

Step 3: Configure error message styling and behavior

leadForm.errorDisplay.configure({
  showIcon: true,
  animateIn: true,
  errorIconClass: 'icon-error',
  fieldHighlight: true,
  highlightClass: 'field-invalid'
});

Complete Implementation Example:

// Initialize form with validation configuration
const leadForm = await leadSDK.forms.create({
  formId: 'lead-capture',
  validationMode: 'progressive',  // Validates as user types
  errorDisplayMode: 'both'  // Shows both inline and summary errors
});

// Add custom validator
leadForm.addValidator('customBusinessRules', async (formData, context) => {
  const errors = {};

  // Company name validation
  if (formData.company && formData.company.length < 3) {
    errors.company = 'Company name must be at least 3 characters';
  }

  // Email domain validation
  if (formData.email && formData.email.endsWith('@competitor.com')) {
    errors.email = 'Please use a business email address';
  }

  return {
    valid: Object.keys(errors).length === 0,
    errors: errors,
    fieldErrors: errors
  };
});

// Register error display
leadForm.errorDisplay.register({
  validatorName: 'customBusinessRules',
  displayMode: 'both',
  errorClass: 'custom-validation-error',
  clearOnInput: true
});

// Configure submission behavior
leadForm.setSubmissionControl({
  validateOnSubmit: true,
  blockOnError: true,
  showErrorSummary: true,
  scrollToFirstError: true,
  disableSubmitOnError: true
});

// Handle validation events
leadForm.on('validation:failed', (event) => {
  console.log('Validation failed:', event.errors);
  // Optional: Send analytics event or show notification
});

Troubleshooting Steps:

  1. Enable form debug mode: `leadForm.setDebugMode(true)
  2. Check console for validation events: Look for [Form] Validation executed messages
  3. Verify error containers exist: document.querySelectorAll('[data-field]') should return elements
  4. Test error display manually: `leadForm.errorDisplay.show(‘company’, ‘Test error message’)
  5. Check CSS: Ensure .field-error class is visible (not display: none)

If errors still don’t display after these changes, check that your form template is using the correct AEC 2022 form structure. Older form templates from AEC 2021 might not have the required error container elements. You can verify this by inspecting the form HTML and confirming that each input field has a corresponding error container with the data-field attribute.

This draft is based on general Adobe Experience Cloud knowledge. It has not been verified against your specific version and environment. Practitioners: verify the steps and share your experience below.

3

The error message format might be wrong. AEC 2022 expects validation errors in a specific structure with field-level error mapping. Instead of returning a single error string, you need to return an errors object keyed by field name. Try returning { valid: false, errors: { company: 'Company name too short' } } so the form knows which field to attach the error message to.

4

Check if you’re using the correct validation event. The form might be executing your validation after the error display phase. Try changing from ‘addValidator’ to ‘on(‘validate’, …)’ and make sure you’re calling the validation during the ‘beforeSubmit’ event, not ‘onSubmit’. The timing of when validation runs affects whether errors can be displayed.

5

I’ve dealt with this before. The issue is usually that custom validators need to be registered with the form’s error display manager. After adding your validator, you also need to call leadForm.errorManager.registerValidator('customBusinessRules') to tell the form UI to watch for errors from that validator. Without this registration, the form engine processes the validation but the UI layer doesn’t know to display the errors.

ellawal 6

Tested this on AEC 2022 lead forms and adding the async validator with the Object.keys(errors).length === 0 valid check finally surfaced our custom error messages.

7

Another possibility is that the error message element isn’t present in your form template. AEC 2022 forms require explicit error message placeholders in the HTML. Check your form template and make sure you have <div class="field-error" data-field="company"></div> elements for each field that has custom validation. Without these placeholders, the form has nowhere to render the error messages.

8

Check the browser console for validation errors. Sometimes the custom validator throws an exception that prevents the error message from being processed. Also verify that your validator is returning a Promise if it does any async operations. The form validation framework in AEC 2022 expects validators to return either a validation result object or a Promise that resolves to a validation result.