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)