Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to detect and validate credit card numbers in jQuery

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 943
    Comment on it

    If you want to detect and validate credit card numbers in jquery you can use the below code.

    In this we use client side validation to verify the credit card type or user using valid card number.

    It will display the type of detected credit card and calculate the length of card number by its type.

    The below code clearly explain how you do this:

    First of all you use jQuery Credit Card validator library.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>
    <script src="jquery.creditCardValidator.js">
    </script>
    

    Then make a HTML form:

    <form>
            <h4>Credit Card Number</h4>
            <ul>
                <li><input type="text" name="card_number" id="card_number" placeholder="1234 5678 9012 3456"></li>
            </ul>
        </form>
    

    And, lastly write the jquery script:

    <script>
        $(function() {
            $('#card_number').validateCreditCard(function(result) {
                if(result.card_type == null)
                {
                    $('#card_number').removeClass();
                }
                else
                {
                    $('#card_number').addClass(result.card_type.name);
                }
    
                if(!result.valid)
                {
                    $('#card_number').removeClass("valid");
                }
                else
                {
                    $('#card_number').addClass("valid");
                }
    
            });
        });
    </script>
    

    In the above we use the jquery validator and jquey functions like removeClass, addClass which work as a css to add or remove the class.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: