{"record":{"id":"27abde670d1f96f2","repo":"basecamp/trix","slug":"this-browser-does-not-support-reportvalidity-for","errorCode":null,"errorMessage":"This browser does not support reportValidity() for trix-editor elements.","messagePattern":"This browser does not support reportValidity\\(\\) for trix-editor elements\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/trix/elements/trix_editor_element.js","lineNumber":360,"sourceCode":"    console.warn(\"This browser does not support the willValidate property for trix-editor elements.\")\n\n    return false\n  }\n\n  formDisabledCallback(value) {\n  }\n\n  setFormValue(value) {\n  }\n\n  checkValidity() {\n    console.warn(\"This browser does not support checkValidity() for trix-editor elements.\")\n\n    return true\n  }\n\n  reportValidity() {\n    console.warn(\"This browser does not support reportValidity() for trix-editor elements.\")\n\n    return true\n  }\n\n  setCustomValidity(validationMessage) {\n    console.warn(\"This browser does not support setCustomValidity(validationMessage) for trix-editor elements.\")\n  }\n\n  #resetBubbled = (event) => {\n    if (event.defaultPrevented) return\n    if (event.target !== this.element.form) return\n    this.element.reset()\n  }\n\n  #clickBubbled = (event) => {\n    if (event.defaultPrevented) return\n    if (this.element.contains(event.target)) return\n","sourceCodeStart":342,"sourceCodeEnd":378,"githubUrl":"https://github.com/basecamp/trix/blob/470040131122bd44e269b4de0f2e9557f90ec994/src/trix/elements/trix_editor_element.js#L342-L378","documentation":"reportValidity() on trix-editor is a fallback that warns and returns true in browsers lacking form-associated custom element support. No native error bubble/UI is shown and the element always reports as valid. Non-fatal console warning.","triggerScenarios":"Calling 'trixEditor.reportValidity()' during submit-time validation or after user interaction, in an unsupported browser, executing the stub at trix_editor_element.js:359-363.","commonSituations":"Submit handlers calling form.reportValidity() (which delegates to each control), custom 'show errors' buttons, older Safari/Firefox environments.","solutions":["Implement your own error display for trix-editor (custom message + styling) instead of reportValidity().","Call reportValidity only after feature detection; otherwise run a custom validation routine for the editor.","Accept the benign warning; the true return value safely lets submission proceed.","Update browsers in your support matrix to versions with form-associated custom elements."],"exampleFix":"// before\nif (!editor.reportValidity()) return;\n// after\nconst ok = editor.reportValidity() && customValidateTrix(editor);\nif (!ok) { showCustomError(editor); return; }","handlingStrategy":"fallback","validationCode":"const ok = isValidControl(editor);\nif (!ok) showCustomError(editor); // do not depend on reportValidity UI","typeGuard":"function reportValidityOrCustom(el) {\n  const native = el.tagName !== 'TRIX-EDITOR' && typeof el.reportValidity === 'function';\n  return native ? el.reportValidity() : customValidate(el);\n}","tryCatchPattern":"try {\n  if (!editor.reportValidity()) return;\n} catch (e) {\n  /* ignore */\n} finally {\n  if (!customValidate(editor)) showCustomError(editor);\n}","preventionTips":["Build custom error UI for trix-editor instead of native reportValidity bubbles","Call reportValidity only after feature detection","Combine native and custom validation results before allowing submit","Verify submit-time UX in browsers without form-association support"],"tags":["browser-compatibility","custom-elements","validation","console-warning"],"backgroundTag":"form-associated-custom-element-unsupported","analyzedSha":"470040131122bd44e269b4de0f2e9557f90ec994","analyzedAt":"2026-09-02T10:19:15.878Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T16:17:10.729Z"}