Validation fails and wrongly marks cardNumber as invalid if we set custom error messages

[micaelomota]

I'm following the example in https://github.com/medipass/react-payment-inputs#bootstrap

My code is exactly the same in the example:

const ERROR_MESSAGES = {
        emptyCardNumber: 'Insira o número de um cartão válido',
        invalidCardNumber: 'Número do cartão inserido é inválido',
        emptyExpiryDate: 'Data de vencimento inválida',
        monthOutOfRange: 'O mês de vencimento deve estar entre 01 e 12',
        yearOutOfRange: 'Ano de vencimento inválido',
        dateOutOfRange: 'Data de vencimento inválida',
        invalidExpiryDate: 'Data de vencimento inválida',
        emptyCVC: 'Insira um código CVV válido',
        invalidCVC: 'Código CVV inserido inválido'
    };

[...]
return (<Form>
        <Form.Control
            // Here is where React Payment Inputs injects itself into the input element.
            {...getCardNumberProps()}
            // You can retrieve error state by making use of the error & touched attributes in `meta`.
            isInvalid={touchedInputs.cardNumber && erroredInputs.cardNumber}
            placeholder="0000 0000 0000 0000"
          />
...

after typing my real credit card number, the validation runs and sets the input as invalid.

this is the meta returned:

code: {name: "CVC", length: 3}
displayName: "Mastercard"
format: /(\d{1,4})/g
gaps: (3) [4, 8, 12]
lengths: [16]
startPattern: /^(5[1-5]|677189)|^(222[1-9]|2[3-6]\d{2}|27[0-1]\d|2720)/
type: "mastercard"
__proto__: Object
error: "Número do cartão inserido é inválido"
erroredInputs: {cardNumber: "Número do cartão inserido é inválido", expiryDate: undefined, cvc: undefined, zip: undefined}
focused: undefined
isTouched: true
touchedInputs: {cardNumber: true, expiryDate: true, cvc: true, zip: false}
__proto__: Object

[LuizMoratelli]

This is related to the blank spaces. When do you set custom error messages the cardNumber keeps blank spaces, but if you did not set it the cardNumber doesn't keep the spaces.

With custom error messages:

Without:

[LuizMoratelli]

Maybe we can change getCardNumberError in validator.js, adding a new line to remove blank spaces, something like that:

cardNumber = cardNumber.replace(/\s/g, '');

[jxom]

Fixed on 1.0.8