jQuery Force Card Number PLugin Demos

Begin

Initialize plugin

How to initialize the plugin

Exemple

< input type="text" id="cardNumber1" >
$("#cardNumber1").ForceCardNumber();
                                

Parameters

Align numbers

Align numbers in input

Default parameter

[ left ]

Parameters

[ left | center | right ]

Exemple

< input type="text" id="cardNumber2" >
$("#cardNumber2").ForceCardNumber({
    align: "right"
});
                                    

Length

Max length digits for field

Default parameter

Max length the card list max value

Parameters

Intiger number

Exemple

< input type="text" id="cardNumber3" >
$("#cardNumber3").ForceCardNumber({
    length: 5
});
                                    

Separator group

Active or desactive separated into groups

Default parameter

[ true ]

Parameters

[ true | false ]

Exemple

< input type="text" id="cardNumber4" >
$("#cardNumber4").ForceCardNumber({
    separatorGroup: false
});
                                    

Char separator

Character to separate the groups

Default parameter

White space

Parameters

one character

Exemple

< input type="text" id="cardNumber5" >
$("#cardNumber5").ForceCardNumber({
    charSeparator: "-"
});
                                    

Digits group

Number of digits for groups

Default parameter

4

Parameters

Integer number

Exemple

< input type="text" id="cardNumber6" >
$("#cardNumber6").ForceCardNumber({
    digitsGroup: 3
});
                                    

Clear on click

If click in input clear field

Default parameter

[ true ]

Parameters

[ true | false ]

Exemple

< input type="text" id="cardNumber7" >
$("#cardNumber7").ForceCardNumber({
    clearOnClick: false
});
                                    

Cards validate

Card list for validade

Default parameter

All cards

Parameters

[ array | string ] { AmericanExpress | DinersClubCarteBlanche | JCB | Laser | VisaElectron | Visa | Dankort | InterPayment | MasterCard | Maestro | Discover }

Exemple

< input type="text" id="cardNumber8" >
$("#cardNumber8").ForceCardNumber({
    cardsValidate: ["Visa", "MasterCard"]
});
                                    

Callbacks

On success validate

Callback for card is valid

Return

[ Valid | ValidNumber ValidLength | ValidType | CardType | CardNetwork ]

Exemple

< input type="text" id="cardNumber9" >
$("#cardNumber9").ForceCardNumber({
    onSuccessValidate: function(data) {
        if(data.Valid)
            $(this).css({"background-color": "#0f0"});
    }
});
                                

On error validate

Callback for card is not valid

Return

[ Valid | ValidNumber ValidLength | ValidType | CardType | CardNetwork ]

Exemple

< input type="text" id="cardNumber10" >
$("#cardNumber10").ForceCardNumber({
    onErrorValidate: function(data) {
        if(!data.Valid)
            $(this).css({"background-color": "#f00"});
    }
});
                                

On key up

Callback for keyUp

Return

[ Valid | ValidNumber ValidLength | ValidType | CardType | CardNetwork ]

Exemple

< input type="text" id="cardNumber10" >
$("#cardNumber11").ForceCardNumber({
  onkeyUp: function(data) {
    $(".cardList img").css({"opacity": "1"});
      if(typeof data.CardNetwork !== "undefined")
        $(".cardList img").not("." + data.CardNetwork).css({"opacity": "0.2"});        
      if(data.Valid)
        $(this).css({"background-color": "#0f0"});
      else
        $(this).css({"background-color": "#f00"});
    }
});