This browser does not support checkValidity() for trix-edito

Error message

This browser does not support checkValidity() for trix-editor elements.

What it means

checkValidity() on trix-editor is a fallback that warns and returns true in browsers without form-associated custom element support, since the element cannot participate in native constraint validation. Callers may mistakenly conclude the editor is valid without any actual check. Non-fatal console warning.

Source

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

    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.")

    return true
  }

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

    return true
  }

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

  #resetBubbled = (event) => {
    if (event.defaultPrevented) return
    if (event.target !== this.element.form) return
    this.element.reset()

View on GitHub (pinned to 4700401311)

Solutions

Validate the trix-editor's value yourself (e.g., editor.value non-empty) instead of relying on checkValidity().
Only call checkValidity when the browser supports form-associated custom elements; otherwise use custom validation.
Use a form submit handler that runs custom checks for trix-editor and native checks for other fields.
Accept/filter the warning since returning true safely avoids blocking submits.

Example fix

// before
if (!formEl.checkValidity()) return;
// after
const valid = formEl.tagName === 'TRIX-EDITOR'
  ? Boolean(formEl.value.trim())
  : formEl.checkValidity();
if (!valid) return;

Defensive patterns

Strategy: validation

Validate before calling

const isTrix = el.tagName === 'TRIX-EDITOR';
const valid = isTrix ? Boolean(el.value.trim()) : el.checkValidity();

Type guard

function isValidControl(el) {
  return el.tagName === 'TRIX-EDITOR'
    ? Boolean(el.value.trim())
    : typeof el.checkValidity === 'function' && el.checkValidity();
}

Try / catch

try {
  const ok = editor.checkValidity();
} finally {
  // checkValidity() on trix-editor always returns true in unsupported browsers:
  // always also run manual value validation
}
const ok = isValidControl(editor);

Prevention

Never trust checkValidity()===true for trix-editor in legacy browsers
Iterate form.elements with a per-type validation strategy
Add explicit required/non-empty checks for rich-text editors
Log which validation path runs so silent true-returns are visible

When it happens

Trigger: Calling 'trixEditor.checkValidity()' (directly or via form validation loops over form.elements) in an unsupported browser, executing the stub at trix_editor_element.js:353-357.

Common situations: Form-wide validation before submit, libraries iterating all controls with checkValidity, older Safari/Firefox environments.

Related errors

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