{"record":{"id":"8b16b9f3cce6e560","repo":"nosir/cleave.js","slug":"cleave-js-please-check-the-element","errorCode":null,"errorMessage":"[cleave.js] Please check the element","messagePattern":"\\[cleave\\.js\\] Please check the element","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/Cleave.js","lineNumber":26,"sourceCode":" */\nvar Cleave = function (element, opts) {\n var owner = this;\n var hasMultipleElements = false;\n\n if (typeof element === 'string') {\n owner.element = document.querySelector(element);\n hasMultipleElements = document.querySelectorAll(element).length > 1;\n } else {\n if (typeof element.length !== 'undefined' && element.length > 0) {\n owner.element = element[0];\n hasMultipleElements = element.length > 1;\n } else {\n owner.element = element;\n }\n }\n\n if (!owner.element) {\n throw new Error('[cleave.js] Please check the element');\n }\n\n if (hasMultipleElements) {\n try {\n // eslint-disable-next-line\n console.warn('[cleave.js] Multiple input fields matched, cleave.js will only take the first one.');\n } catch (e) {\n // Old IE\n }\n }\n\n opts.initValue = owner.element.value;\n\n owner.properties = Cleave.DefaultProperties.assign({}, opts);\n\n owner.init();\n};\n","sourceCodeStart":8,"sourceCodeEnd":44,"githubUrl":"https://github.com/nosir/cleave.js/blob/a966c95cf5193f223485a10eec8405bb32b8f6dd/src/Cleave.js#L8-L44","documentation":"Cleave throws this when it cannot resolve a valid DOM element to attach formatting to. The constructor checks `owner.element` after resolving a string selector or raw element, and if it is null/undefined the instance is useless, so it fails fast at src/Cleave.js:26.","triggerScenarios":"new Cleave(null); new Cleave('input.phone') where the selector matches nothing; passing a jQuery-wrapped set or an array-like that has no .value; calling new Cleave() before the DOM is rendered (script runs before the input exists).","commonSituations":"Script loaded in without DOMContentLoaded; typo in the CSS selector; React/Vue component rendering after the Cleave constructor runs; passing the wrong variable (undefined) from an optional ref.","solutions":["Ensure the element exists before constructing: wrap in DOMContentLoaded or place the script before .","Verify the selector string matches exactly one input element (check for typos).","Pass the actual HTMLElement, not a jQuery object or NodeList.","When the element may be absent, guard before constructing."],"exampleFix":"// before\nnew Cleave('.phone-input', { phone: true, phoneRegionCode: 'US' });\n// after\nconst el = document.querySelector('.phone-input');\nif (el) {\n new Cleave(el, { phone: true, phoneRegionCode: 'US' });\n}","handlingStrategy":"validation","validationCode":"function canInitCleave(target) {\n const el = typeof target === 'string' ? document.querySelector(target) : target;\n return !!(el && el.tagName === 'INPUT');\n}\nif (!canInitCleave('.phone-input')) throw new Error('Cleave target element not found');","typeGuard":"function isCleaveTarget(el) {\n return el instanceof HTMLElement && el.tagName === 'INPUT' && typeof el.value === 'string';\n}","tryCatchPattern":"try {\n new Cleave(selector, opts);\n} catch (e) {\n if (e.message.includes('Please check the element')) {\n console.warn('Cleave: target not found for', selector);\n } else { throw e; }\n}","preventionTips":["Initialize Cleave after DOM ready (DOMContentLoaded or useEffect/componentDidMount).","Pre-resolve the element with querySelector and assert it before constructing.","Use unique selectors (ids) rather than broad class selectors.","In frameworks, attach Cleave in a mount lifecycle/ref callback, not at module load."],"tags":["dom","initialization","missing-element"],"backgroundTag":"missing-dom-element","analyzedSha":"a966c95cf5193f223485a10eec8405bb32b8f6dd","analyzedAt":"2026-09-02T23:44:35.488Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}