{"record":{"id":"b4b2ec0b954e3913","repo":"basecamp/trix","slug":"this-browser-does-not-support-setcustomvalidity-va","errorCode":null,"errorMessage":"This browser does not support setCustomValidity(validationMessage) for trix-editor elements.","messagePattern":"This browser does not support setCustomValidity\\(validationMessage\\) for trix-editor elements\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/trix/elements/trix_editor_element.js","lineNumber":366,"sourceCode":"  }\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\n    const label = findClosestElementFromNode(event.target, { matchingSelector: \"label\" })\n    if (!label) return\n\n    if (!Array.from(this.labels).includes(label)) return\n\n    this.element.focus()","sourceCodeStart":348,"sourceCodeEnd":384,"githubUrl":"https://github.com/basecamp/trix/blob/470040131122bd44e269b4de0f2e9557f90ec994/src/trix/elements/trix_editor_element.js#L348-L384","documentation":"setCustomValidity(validationMessage) on trix-editor is a stub that only logs this warning in browsers without form-associated custom element support, so custom validity messages can never be registered on the element. Subsequent checkValidity/reportValidity will not reflect any custom state. Non-fatal console warning.","triggerScenarios":"Calling 'trixEditor.setCustomValidity(\"...\")' (e.g., after server-side validation errors) in an unsupported browser, executing the stub at trix_editor_element.js:365-367.","commonSituations":"Apps piping backend validation errors into controls via setCustomValidity; form libraries managing custom error state; older Safari/Firefox deployments.","solutions":["Store custom error state yourself (e.g., a data attribute or wrapper component state) and render it, rather than relying on setCustomValidity.","Only call setCustomValidity after confirming form-associated support; otherwise apply a custom error-rendering path.","Accept the warning as benign and rely on your own validation UI.","Upgrade the runtime to a browser where constraint validation works for custom elements."],"exampleFix":"// before\neditor.setCustomValidity(serverError);\n// after\nif (supportsFormAssociatedElements()) {\n  editor.setCustomValidity(serverError);\n} else {\n  editor.dataset.customValidity = serverError;\n  showCustomError(editor, serverError);\n}","handlingStrategy":"fallback","validationCode":"if (!('ElementInternals' in window)) {\n  // setCustomValidity is a no-op on trix-editor; store errors in app state\n}","typeGuard":"function canSetCustomValidity(el) {\n  return el instanceof HTMLElement && 'ElementInternals' in window && typeof el.setCustomValidity === 'function';\n}","tryCatchPattern":"try {\n  editor.setCustomValidity(serverError);\n} catch (e) {\n  editor.dataset.customValidity = serverError;\n}\nif (!('ElementInternals' in window)) renderCustomError(editor, serverError);","preventionTips":["Keep server-side validation errors in application state, not on the DOM element","Render custom error messages in a dedicated UI region for trix-editor","Feature-detect ElementInternals before calling setCustomValidity","Re-render custom errors on editor change so state stays consistent"],"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"}