{"record":{"id":"ef8f659d08a1d27d","repo":"basecamp/trix","slug":"this-browser-does-not-support-the-validationmessag","errorCode":null,"errorMessage":"This browser does not support the validationMessage property for trix-editor elements.","messagePattern":"This browser does not support the validationMessage property for trix-editor elements\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/trix/elements/trix_editor_element.js","lineNumber":336,"sourceCode":"  }\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  }\n\n  get willValidate() {\n    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.\")","sourceCodeStart":318,"sourceCodeEnd":354,"githubUrl":"https://github.com/basecamp/trix/blob/470040131122bd44e269b4de0f2e9557f90ec994/src/trix/elements/trix_editor_element.js#L318-L354","documentation":"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.","triggerScenarios":"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.","commonSituations":"Custom error displays that mirror native messages, generic form-error collectors, legacy Safari/Firefox environments.","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."],"exampleFix":"// before\nshowError(field.validationMessage);\n// after\nconst msg = field.validationMessage || (field.tagName === 'TRIX-EDITOR' ? 'This field is required.' : '');\nif (msg) showError(msg);","handlingStrategy":"fallback","validationCode":"const msg = el.validationMessage || customMessages.get(el) || '';","typeGuard":"function validationMessageOf(el) {\n  return el.tagName === 'TRIX-EDITOR' && !('ElementInternals' in window)\n    ? customMessages.get(el) ?? ''\n    : el.validationMessage;\n}","tryCatchPattern":"try {\n  showError(editor.validationMessage || 'This field is required.');\n} catch (e) {\n  showError(customMessages.get(editor) || 'This field is required.');\n}","preventionTips":["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"],"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"}