Using the Form Designer › How to Use JavaScript Functions in Fields › How to Validate User Input › How to Use a JavaScript Function to Validate the Format of Credit Card Numbers

How to Use a JavaScript Function to Validate the Format of Credit Card Numbers

This topic explains how to configure Form Designer forms to use a JavaScript function to verify that users entered a credit card number in the correct format for the credit card type that they specified. This process does not authenticate the data entered by the user but does assist in the validation process by verifying the format.

Note: You can also use regular expressions to validate the format of credit card numbers and other kinds of commonly requested data, such as social security numbers, email addresses, phone numbers, and so forth.

This topic explains how to present two credit card types: Master Card and Visa. For each type, you create a radio group option and a text field for the account number. Each account number field is disabled by design but is enabled if the user selects the matching credit card type.

You use the pre-defined JavaScript function named ca_fdValidateCC(number, 'type') to validate the format of the credit card number entered by the user, based on the credit card type that the user selected. This JavaScript function verifies the format according to the specifications set by the company issuing the credit card. Each company sets its own standard format.

To verify the credit card numbers entered by users, follow these steps. These steps use a continuing example for illustration.

1. Design and create the form, if you have not already done so.
2. Verify that the value of the form's HTML Attribute named _id specifies a meaningful name, such as ccValdtnForm1.
3. Add a radio group; it is one of the elements of a form.
   1. For the value of the _id attribute of the radio group, specify a meaningful name, such as rgCCVal, and save the form.
   2. Rename "Radio Group" to a meaningful name or phrase, such as Select a Credit Card or Credit Card Type.
4. Add the first radio group option; these options are elements of a form that apply only to radio groups.
   1. For the _id attribute, specify a meaningful name, such as mcard (signifying Master Card radio group option), and save the form.
   2. Rename "Radio" to a meaningful name, such as Master Card.
5. Add the second radio group option.
   1. For the _id attribute, specify a meaningful name, such as visa (signifying Visa radio group option), and save the form.
   2. Rename "Radio" to a meaningful name, such as Visa.
6. Add a text field onto the form
   1. For the _id attribute, specify a meaningful name, such as ccf.
   2. For the value of the JavaScript attribute named onvalidate, specify cc_val(_val).
7. Use the Script dialog to add the following function definition:

   function cc_val(value) {
                   var ccname = '';
                   if (ca_fdIsSelectRadio('ccValdtnForm1', 'rgCCVal', 'mcard'))
                                   ccname = 'master';
                   else
                                   ccname = 'visa';
                   ca_fdValidateCC(value, ccname);
   }
   

   As a best practice, use the Script dialog on each form to create and maintain the custom JavaScript functions for the form.

8. Finish creating the form to meet your requirements.
9. Test the form to verify that it works as you intended.

As a best practice, verify that you test the form in a service in a test environment before you use the form and the service in a production environment.