|Option ||HTML attribute ||Type ||Description |
|String ||The error message |
When setting options via HTML attributes, remember to enable the validator by setting data-fv-creditcard="true".
The message option can be updated on the fly via the updateMessage()
Looking at this example
if you want to validate credit card expiration date
Behind the scene, in addition to using the Luhn algorithm, the validator also validate the IIN ranges and length of credit card number.
It supports validating the following cards:
13 digits Visa credit cards are no longer used and it will be treated as an invalid card number.
Asking credit card number to match with selected type
The following form asks to fill in the valid credit card number which matches the selected type.
Showing card icon
The following example shows credit card icon provided by Font Awesome based on the card type.
|Card type ||Icon ||CSS class |
|American Express || || |
|Discover || || |
|Mastercard || || |
|Visa || || |
|Other || || |
Accept test credit card numbers
Do you want some of fake, even invalid credit card numbers to be valid? For example, in the developing phase, you might want the creditCard validator to accept a few of particular card numbers.
Of course, you don't need to modify the source code of creditCard validator and add your own numbers there. FormValidation allows you to do it in a nice way via the transformer option.
By using this option, we transform your test card numbers from an invalid to a valid one.
The transformer option changes the card numbers for validation process only. When the form is submitted, you get the extract number that is initially provided by the user
For more usage of
transformer option, you should take a look at the following example: