Ajax Hacks: Tips & Tools for Creating Responsive Web Sites
| Make sure the security code is entered correctly in your Ajax credit card application. The card security code, or CSC, is the three- or four-digit number that is printed on the back of a credit card, along with the card number (see http://en.wikipedia.org/wiki/Card_Security_Code). The CSC is designed to augment the authentication of the credit card user. In addition to the card number, many online stores that take credit cards also request that the user provide the CSC associated with the card. This act in itself, however, puts in jeopardy the secure identity of the CSC, so this authentication technique is far from airtight. The only entity that can validate a CSC is the merchant bank that has the responsibility for processing the credit card. There isn't a special formula like the Luhn algorithm to validate it (it's only three or four numbers long, anyway!). However, this hack verifies that the user has entered the CSC correctly, using the following criteria:
Figure 3-6 shows a web page that requests a CSC and other information (you may recognize it from "Validate Credit Card Numbers" [Hack #25]). Figure 3-6. Validate card security codes This hack sets up the CSC validation so that when the user types in the text field and then clicks outside of the field or presses the Tab key, JavaScript code ensures that the criteria described earlier are met before continuing with the rest of the application. Here is the HTML for the web page: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script type="text/javascript" src="/books/4/254/1/html/2/js/http_request.js"></script> <script type="text/javascript" src="/books/4/254/1/html/2/js/cc.js"></script> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Enter credit card number</title> </head> <body> <h3>Please enter your payment information</h3> <div ></div> <p> [Name and billing address appear here] </p> <p> Credit card type: </p> <form action="javascript:void%200"> <p> <select name="cctype" > <option value="Choose one...">Choose one...</option> <option value="Mastercard">Mastercard</option> <option value="Visa">Visa</option> <option value="American Express">American Express</option> <option value="Discover">Discover</option> </select> </p> <p> Credit card number (#### #### #### #### or no spaces): <input type="text" name="cc" size="16" maxlength="19" /> </p> <p>Expiration date: <select name="exp_month" > <option>January</option> <option>February</option> <option>March</option> <option>April</option> <option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option> <option>October</option> <option>November</option> <option>December</option> </select> <select name="exp_year" > <option>2005</option> <option>2006</option> <option>2007</option> <option>2008</option> <option>2009</option> <option>2010</option> </select> </p> <p> Card Security code: <input type="text" name="scode" size="4" maxlength="4" /> </p> <p> <button type="submit" name="submit" value= "Submit">Submit</button> </p> </form> </body> </html>
The web page imports a JavaScript file called cc.js. Here is the code in cc.js that handles the CSC text field: var csc = document.getElementById("csc"); if(csc != null) { csc.onblur=function( ){ var typ = document.getElementById("cctype"); if(typ != null){ if(csc.value.indexOf("Choose") == -1 && ! checkCSC(typ.value, csc.value. replace(/\\s/,""))) { eMsg("Please enter a valid value for the security code. ","red"); csc.focus( ); document.getElementById("submit").disabled=true; } else { clearMsg( ); document.getElementById("submit").disabled=false; } } }; }
The variable csc refers to the text field where the user is supposed to enter the CSC. The code sets the field's onblur event handler to a function that checks the security code value. The function then generates a user message and disables the Submit button if the value is invalid. You want to disable this button because the application should prevent the running of the form's onsubmit event handler until the security code text field contains a valid value. checkCSC( ) validates the CSC field using regular expressions: function checkCSC(cardTyp,fldValue){ var re = null; if(cardTyp != null){ if(cardTyp == "American Express"){ re = /^\\d{4}$/; return re.test(fldValue); //Mastercard, Visa, Discover } else { re = /^\\d{3}$/; return re.test(fldValue); } } }
If the card is American Express, the regular expression looks for a string containing four digits. The RegExp object's test( ) method returns true if its string parameter returns a match: re = /^\\d{4}$/; return re.test(fldValue);
Similarly, the code checks the value associated with the three other major credit card types for a string containing three digits. A false return value from this method indicates an invalid value; in this case, the user will see a red message and a disabled Submit button, as in Figure 3-7. Figure 3-7. The security code text field checks itself
When the application has finished checking the card security code, the user can click the Submit button. Then an onsubmit event handler will verify the credit card number, as in the previous hack, before sending a valid number to a server component to process the purchase order. |
Категории