Skeuocard, Interactive Credit Card Input and Validation

Skeuocard, Interactive Credit Card Input and Validation

Have you experienced on online shopping? When you are going to checkout, a list of form with many elements is lack of User Experience. What we developers and designers try days and days to enhance our web using experience.

Skeuocard is a re-think of the way that we handle credit card input on the web. It has a great interactive UI.

It progressively enhances credit card input forms so that the card inputs become skeuomorphic, facilitating accurate and fast card entry, and removing barriers to purchase.

Example

Woo, cool right!?

Validation

Skeuocard will help us handle the valid card number by default. If the user has inputed corrected cerdit card infomation. It will then allow the flip to back and type your CVC code.

in coding, you only have to check if .invalid class name in exist on the skeoucard DOM. It is easy.

$('#myform').on('submit', function(){
    if($('#skeuocard').has('.invalid')){
        return false; // not a valid card; don't allow submission
    }else{
        return true; // looks good!
    }
})

Check it out

Note: The example are created by Kenneth Keiter and The featured image is copy from his blog.

Related Articles