[cleave.js] Multiple input fields matched, cleave.js will on

Error message

[cleave.js] Multiple input fields matched, cleave.js will only take the first one.

What it means

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.

Source

Thrown at src/Cleave.js:32

        owner.element = document.querySelector(element);
        hasMultipleElements = document.querySelectorAll(element).length > 1;
    } else {
      if (typeof element.length !== 'undefined' && element.length > 0) {
        owner.element = element[0];
        hasMultipleElements = element.length > 1;
      } else {
        owner.element = element;
      }
    }

    if (!owner.element) {
        throw new Error('[cleave.js] Please check the element');
    }

    if (hasMultipleElements) {
      try {
        // eslint-disable-next-line
        console.warn('[cleave.js] Multiple input fields matched, cleave.js will only take the first one.');
      } catch (e) {
        // Old IE
      }
    }

    opts.initValue = owner.element.value;

    owner.properties = Cleave.DefaultProperties.assign({}, opts);

    owner.init();
};

Cleave.prototype = {
    init: function () {
        var owner = this, pps = owner.properties;

        // no need to use this lib
        if (!pps.numeral && !pps.phone && !pps.creditCard && !pps.time && !pps.date && (pps.blocksLength === 0 && !pps.prefix)) {

View on GitHub (pinned to a966c95cf5)

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.

Example fix

// before
new Cleave('.card-input', { creditCard: true });
// after
document.querySelectorAll('.card-input').forEach(el => {
  new Cleave(el, { creditCard: true });
});

Defensive patterns

Strategy: validation

Validate before calling

function selectorMatchesExactlyOne(sel) {
  return document.querySelectorAll(sel).length === 1;
}
if (document.querySelectorAll('.card-input').length > 1) {
  console.warn('Multiple matches: loop and create one Cleave per element');
}

Prevention

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.

When it happens

Trigger: new Cleave('input.month') where multiple inputs match that selector; using broad selectors like 'input' or '.form-control' that hit several fields.

Common situations: 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.

Related errors

AI-assisted analysis of nosir/cleave.js@a966c95cf5 (2026-09-02). Data as JSON: /api/errors/1b9ab31262192ca0. Report an issue: GitHub.