{"record":{"id":"1b9ab31262192ca0","repo":"nosir/cleave.js","slug":"cleave-js-multiple-input-fields-matched-cleave","errorCode":null,"errorMessage":"[cleave.js] Multiple input fields matched, cleave.js will only take the first one.","messagePattern":"\\[cleave\\.js\\] Multiple input fields matched, cleave\\.js will only take the first one\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/Cleave.js","lineNumber":32,"sourceCode":"        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\nCleave.prototype = {\n    init: function () {\n        var owner = this, pps = owner.properties;\n\n        // no need to use this lib\n        if (!pps.numeral && !pps.phone && !pps.creditCard && !pps.time && !pps.date && (pps.blocksLength === 0 && !pps.prefix)) {","sourceCodeStart":14,"sourceCodeEnd":50,"githubUrl":"https://github.com/nosir/cleave.js/blob/a966c95cf5193f223485a10eec8405bb32b8f6dd/src/Cleave.js#L14-L50","documentation":"This is not a thrown Error but a console.warn emitted during construction when a string selector matches more than one DOM element. Cleave formats only the first matched element; the rest stay unformatted.","triggerScenarios":"new Cleave('input.month') where multiple inputs match that selector; using broad selectors like 'input' or '.form-control' that hit several fields.","commonSituations":"Rendering repeated form fields (list rows, table rows) and formatting them with one shared class; forgetting that Cleave takes only the first element instead of all matches.","solutions":["Give each input a unique id or selector and construct a separate Cleave instance per element.","If multiple elements should share formatting, query all and loop: document.querySelectorAll(sel).forEach(el => new Cleave(el, opts)).","Treat this warning as informational — the first element is still formatted correctly."],"exampleFix":"// before\nnew Cleave('.card-input', { creditCard: true });\n// after\ndocument.querySelectorAll('.card-input').forEach(el => {\n  new Cleave(el, { creditCard: true });\n});","handlingStrategy":"validation","validationCode":"function selectorMatchesExactlyOne(sel) {\n  return document.querySelectorAll(sel).length === 1;\n}\nif (document.querySelectorAll('.card-input').length > 1) {\n  console.warn('Multiple matches: loop and create one Cleave per element');\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Use ids or a data-* attribute for unique element targeting.","Loop over querySelectorAll results and instantiate Cleave per element for repeated fields.","Never rely on a shared class selector when the component renders multiple times.","Listen for this warning in dev CI to catch duplicated selectors early."],"tags":["dom","selector","multiple-elements"],"backgroundTag":"ambiguous-selector","analyzedSha":"a966c95cf5193f223485a10eec8405bb32b8f6dd","analyzedAt":"2026-09-02T23:44:35.488Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}