This browser does not support the validity property for trix

Error message

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

What it means

Reading 'validity' on a trix-editor in a browser without form-associated custom element support returns null and logs this warning, because the element cannot participate in native constraint validation. Code expecting a ValidityState object will receive null here. Non-fatal console warning.

Source

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

    return false
  }

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

  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) {
  }

View on GitHub (pinned to 4700401311)

Solutions

Check for null before using validity: fall back to custom validation for trix-editor elements.
Run constraint-validation-dependent code only in browsers with form-associated custom element support.
Skip trix-editor elements in generic validity loops and validate their value manually.
Filter the expected warning if it is known noise in your environment.

Example fix

// before
if (field.validity.valid) continue;
// after
const valid = field.validity ? field.validity.valid : (field.tagName === 'TRIX-EDITOR' ? Boolean(field.value.trim()) : true);
if (!valid) show(field);

Defensive patterns

Strategy: type-guard

Validate before calling

if (!('ElementInternals' in window)) {
  // validity will be null on trix-editor; use custom validation
}

Type guard

function getValidity(el) {
  return el.tagName === 'TRIX-EDITOR' && !('ElementInternals' in window)
    ? null
    : el.validity;
}

Try / catch

const v = getValidity(editor);
if (v) {
  if (!v.valid) showError();
} else {
  if (!editor.value.trim()) showError();
}

Prevention

Null-check validity before using ValidityState properties
Branch validation logic per element type instead of assuming ValidityState exists
Feature-detect constraint-validation support once at app startup
Keep a manual validation path for trix-editor in your form library

When it happens

Trigger: Accessing 'trixEditor.validity' (e.g., generic validation loops, or code reading validity.valid) in an unsupported browser, hitting the stub getter at trix_editor_element.js:330-333.

Common situations: Shared form-validation utilities that assume all controls expose ValidityState; constraint-validation UIs; older Safari/Firefox deployments.

Related errors

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