This browser does not support the validationMessage property

Error message

This browser does not support the validationMessage property for trix-editor elements.

What it means

The validationMessage getter is a stub that warns and returns "" in browsers lacking form-associated custom element support. Any code reading the editor's validationMessage gets an empty string, so native-style error text is unavailable. Non-fatal console warning.

Source

Thrown at src/trix/elements/trix_editor_element.js:336

  }

  get required() {
    console.warn("This browser does not support the [required] attribute for trix-editor elements.")

    return false
  }

  set required(value) {
    console.warn("This browser does not support the [required] attribute for trix-editor elements.")
  }

  get validity() {
    console.warn("This browser does not support the validity property for trix-editor elements.")
    return null
  }

  get validationMessage() {
    console.warn("This browser does not support the validationMessage property for trix-editor elements.")

    return ""
  }

  get willValidate() {
    console.warn("This browser does not support the willValidate property for trix-editor elements.")

    return false
  }

  formDisabledCallback(value) {
  }

  setFormValue(value) {
  }

  checkValidity() {
    console.warn("This browser does not support checkValidity() for trix-editor elements.")

View on GitHub (pinned to 4700401311)

Solutions

Render your own error message for trix-editor instead of relying on validationMessage.
Branch on browser support: use validationMessage only when the element supports constraint validation.
Treat empty validationMessage as 'no native message available' and fall back to custom copy.
Accept/filter the benign warning in expected environments.

Example fix

// before
showError(field.validationMessage);
// after
const msg = field.validationMessage || (field.tagName === 'TRIX-EDITOR' ? 'This field is required.' : '');
if (msg) showError(msg);

Defensive patterns

Strategy: fallback

Validate before calling

const msg = el.validationMessage || customMessages.get(el) || '';

Type guard

function validationMessageOf(el) {
  return el.tagName === 'TRIX-EDITOR' && !('ElementInternals' in window)
    ? customMessages.get(el) ?? ''
    : el.validationMessage;
}

Try / catch

try {
  showError(editor.validationMessage || 'This field is required.');
} catch (e) {
  showError(customMessages.get(editor) || 'This field is required.');
}

Prevention

Provide your own error copy for trix-editor rather than reading validationMessage
Treat empty validationMessage as 'unsupported', not 'valid'
Keep custom error messages in app state, not on the DOM element
Test error rendering in browsers without form-association support

When it happens

Trigger: Accessing 'trixEditor.validationMessage' (e.g., rendering constraint-validation error text, or reporting via reportValidity flows) in an unsupported browser, executing the stub at trix_editor_element.js:335-339.

Common situations: Custom error displays that mirror native messages, generic form-error collectors, legacy Safari/Firefox environments.

Related errors

AI-assisted analysis of basecamp/trix@4700401311 (2026-09-02). Data as JSON: /api/errors/ef8f659d08a1d27d. Report an issue: GitHub.