{"record":{"id":"be4e8c892e7c9ec7","repo":"basecamp/trix","slug":"this-browser-does-not-support-the-required-attri","errorCode":null,"errorMessage":"This browser does not support the [required] attribute for trix-editor elements.","messagePattern":"This browser does not support the \\[required\\] attribute for trix-editor elements\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/trix/elements/trix_editor_element.js","lineNumber":321,"sourceCode":"    return null\n  }\n\n  set name(value) {\n    console.warn(\"This browser does not support the .name property for trix-editor elements.\")\n  }\n\n  get disabled() {\n    console.warn(\"This browser does not support the [disabled] attribute for trix-editor elements.\")\n\n    return false\n  }\n\n  set disabled(value) {\n    console.warn(\"This browser does not support the [disabled] attribute for trix-editor elements.\")\n  }\n\n  get required() {\n    console.warn(\"This browser does not support the [required] attribute for trix-editor elements.\")\n\n    return false\n  }\n\n  set required(value) {\n    console.warn(\"This browser does not support the [required] attribute for trix-editor elements.\")\n  }\n\n  get validity() {\n    console.warn(\"This browser does not support the validity property for trix-editor elements.\")\n    return null\n  }\n\n  get validationMessage() {\n    console.warn(\"This browser does not support the validationMessage property for trix-editor elements.\")\n\n    return \"\"\n  }","sourceCodeStart":303,"sourceCodeEnd":339,"githubUrl":"https://github.com/basecamp/trix/blob/470040131122bd44e269b4de0f2e9557f90ec994/src/trix/elements/trix_editor_element.js#L303-L339","documentation":"The get required() accessor is a stub that warns when the browser lacks form-associated custom element support; reading 'required' on a trix-editor always returns false there. This is why a form may silently skip required-field validation for the editor. Non-fatal console warning.","triggerScenarios":"Reading 'trixEditor.required' (e.g., generic form validation iterating form.elements and checking required) in an unsupported browser, executing the stub at trix_editor_element.js:320-324.","commonSituations":"Generic validation libraries (or native constraint validation UI) checking required fields; browsers like Safari < 16.4 or older Firefox where trix-editor cannot participate in constraint validation.","solutions":["Use a modern browser with form-associated custom elements so required participates in native validation.","Perform your own required check: validate that the editor's input value is non-empty on submit instead of relying on 'required'.","Accept/filter the warning; the getter safely returns false.","Guard validation code with a feature check for constraint-validation support on the element."],"exampleFix":"// before\nif (field.required && !field.value) show(field);\n// after\nconst isTrix = field.tagName === 'TRIX-EDITOR';\nconst value = isTrix ? field.value || field.editor?.getDocument().toString().trim() : field.value;\nif (field.required && !value) show(field);","handlingStrategy":"validation","validationCode":"// before reading .required on any form control:\nconst isRequired = field instanceof HTMLInputElement || field instanceof HTMLTextAreaElement\n  ? field.required\n  : field.getAttribute('data-required') === 'true';","typeGuard":"function hasNativeRequired(el) {\n  return el instanceof HTMLElement && 'ElementInternals' in window && el.tagName !== 'TRIX-EDITOR';\n}","tryCatchPattern":"try {\n  const req = trixEditor.required;\n  validateWith(req);\n} catch (e) {\n  validateWith(trixEditor.getAttribute('data-required') === 'true');\n}","preventionTips":["Validate trix-editor values in your submit handler, not via the DOM required flag","Store requiredness in your own attribute (data-required) that works everywhere","Skip trix-editor in generic constraint-validation loops and handle it explicitly","Verify validation behavior in the oldest browser you 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"}