Semantic-Org/Semantic-UI · warning

{name} must be a valid credit card number

Error message

{name} must be a valid credit card number

What it means

Default prompt for the Semantic UI Form `creditCard` rule (settings.rules.creditCard, form.js:1566). Validates the number against per-brand pattern+length (visa/amex/mastercard/discover/unionPay/jcb/maestro/dinersClub/laser/visaElectron), optionally restricted to a comma-separated `{ruleValue}` list of brands; dashes are stripped; UnionPay skips Luhn, all others require a passing Luhn checksum (form.js:1656-1670). Empty/non-string input returns undefined (falsy) → prompt shown.

Source

Thrown at src/definitions/behaviors/form.js:1276

    regExp               : '{name} is not formatted correctly',
    integer              : '{name} must be an integer',
    decimal              : '{name} must be a decimal number',
    number               : '{name} must be set to a number',
    is                   : '{name} must be "{ruleValue}"',
    isExactly            : '{name} must be exactly "{ruleValue}"',
    not                  : '{name} cannot be set to "{ruleValue}"',
    notExactly           : '{name} cannot be set to exactly "{ruleValue}"',
    contain              : '{name} must contain "{ruleValue}"',
    containExactly       : '{name} must contain exactly "{ruleValue}"',
    doesntContain        : '{name} cannot contain  "{ruleValue}"',
    doesntContainExactly : '{name} cannot contain exactly "{ruleValue}"',
    minLength            : '{name} must be at least {ruleValue} characters',
    length               : '{name} must be at least {ruleValue} characters',
    exactLength          : '{name} must be exactly {ruleValue} characters',
    maxLength            : '{name} cannot be longer than {ruleValue} characters',
    match                : '{name} must match {ruleValue} field',
    different            : '{name} must have a different value than {ruleValue} field',
    creditCard           : '{name} must be a valid credit card number',
    minCount             : '{name} must have at least {ruleValue} choices',
    exactCount           : '{name} must have exactly {ruleValue} choices',
    maxCount             : '{name} must have {ruleValue} or less choices'
  },

  selector : {
    checkbox   : 'input[type="checkbox"], input[type="radio"]',
    clear      : '.clear',
    field      : 'input, textarea, select',
    group      : '.field',
    input      : 'input',
    message    : '.error.message',
    prompt     : '.prompt.label',
    radio      : 'input[type="radio"]',
    reset      : '.reset:not([type="reset"])',
    submit     : '.submit:not([type="submit"])',
    uiCheckbox : '.ui.checkbox',
    uiDropdown : '.ui.dropdown'

View on GitHub (pinned to 597843ab84)

Solutions

1. Enter a valid card number (Luhn-valid) for an allowed brand.
2. Strip spaces (not just dashes) before validation: `value = value.replace(/[\s-]/g,'')`.
3. If restricting brands, ensure the `{ruleValue}` list includes the user's brand.
4. Pair with `empty` if optional, and add a custom `prompt`.

Example fix

// before - spaces not stripped, Luhn fails
rules: [{ type: 'creditCard' }]

// after - normalize spaces, restrict brands, friendly prompt
// pre-submit: input.value = input.value.replace(/[\s-]/g, '');
rules: [{ type: 'creditCard[visa,mastercard]', prompt: 'Enter a valid Visa or Mastercard number' }]

function luhn(num) {
  let sum = 0, alt = 0; num = num.replace(/[\s-]/g, '');
  if (!/^\d+$/.test(num)) return false;
  for (let i = num.length - 1; i >= 0; i--) { sum += [0,2,4,6,8,1,3,5,7,9][alt][parseInt(num[i],10)] ^ alt; alt ^= 1; }
  return sum % 10 === 0 && sum > 0;
}
if (!luhn($field.val())) { /* warn */ }

const isDigitsOnly = (v) => /^\d+$/.test(String(v).replace(/[\s-]/g, ''));

When it happens

Trigger: `{type:'creditCard'}` with a mistyped number, a number failing Luhn, or `{type:'creditCard[visa]'}` with an AmEx number. Empty input also triggers it.

Common situations: Users typing spaces/dashes (only dashes are stripped, not spaces), expired test numbers, brands outside the supported set, or requiring a brand the user is not using.

Related errors

• {name} must be a valid url
• {name} is not formatted correctly
• {name} must be an integer
• {name} must be a decimal number
• {name} must be set to a number

AI-assisted analysis of Semantic-Org/Semantic-UI@597843ab84 (2026-08-13). Data as JSON: /api/errors/8c910dfdaea59702. Report an issue: GitHub.