SophiaKnows > Codebase > JavaScript

TEST NUMBERS:

Visa        4111 1111 1111 1111
MasterCard  5500 0000 0000 0004
AmEx        3400 0000 0000 009
Discover    6011 0000 0000 0012

Source/Downloads

ccvalidate.js (4k)

ccvalidate.html (4k)

ccvalidate.zip (4k)

In General: The scripts in this page perfom an intitial validation of a credit card number entered in the form as well as automatically generating a valid range of years which populate the expiration year select.

All credit cards include certain self-verifying features. Card numbers have fixed lengths (15 digits for American Express, and 16 digits for MasterCard, Visa and Discover), and each card type only permits a limited range of valid initial digits or prefixes. In addition, card numbers contain a "check digit" which is used to ensure that that only certain number combinations are valid.

Althought it is not possible to perform full client-side validation of a credit card (which requires secure access to the issuer's database), you can use JavaScript to check these basic security features and in order catch at least the most common user errors (transposed and omitted digits and wrong card type selection) before the form is submitted.

Expiration Year

The automated expiration year select function initYearSelect(f) is called as an onload event from the document body tag. It accepts one parameter (f) which is a reference to the form containing the select:

<BODY onload="initYearSelect(document.forms['creditcard']")>

The expiration year select will populate with a list of two digit expiration years (YY) from the current year to the current year plus 10.

Number Validator

The credit card validation subroutine checknumber() is called as the return value of the form's onsubmit event handler and accepts a single parameter which is a reference to the form containing the credit card controls, or simply the keyword this:

<FORM action="example.html" onsubmit="return checknumber(this)>

If the results of checknumber() are true (no errors), or JavaScript is disabled, the contents of the form will be submitted to the processing-agent specified in the form's ACTION attribute.

If the results of checknumber() are false (one or more errors), submission will abort and an alert dialog will launch indicating the nature of each error identified by the scripts.

Integrating With Standard Validator

The credit card validation subroutine can be integrated with the standard forms validator by (1) inserting the credit card validator functions in the head of the document containing the form; (2) including the credit card form controls in the form section containing the other validated controls; and (3) adding the following line to Validate()

errors+=((!checknumber(f)?1:0);

Note that in this case you do not need to make a separate call to checknumber() from the form's onsubmit attribute.