February 26, 2014

API Best Practices, Part II: Using HTML5 Field Validation

Posted by Craig Christenson Category IconTechnology

In this new blog series, 2Checkout explores the developments and features of its brand new Payment API, currently in BETA. To see the new 2Checkout Payment API BETA and use it as your new checkout, apply here.

Server-side validation is a must for security reasons, but minimal client-side field format validation should always be used to provide immediate feedback and prevent unnecessary roundtrips to your server. For example, to insure that the user has provided all of the requested information on a payment form, it is important to at least validate the format on required data before the request is sent server side. This type of validation is traditionally handled with a combination of JavaScript and CSS to first validate the value, and then display a message to the user. While this is not terribly difficult, the ever-growing adoption of HTML5 has made this process easier than ever. HTML5 attributes can handle this validation directly on the input elements without additional JavaScript validation or UI changes to display error messages. Let’s take a look at how we can add validation to a simple Payment API form in just a couple of steps.

We know that all of the input fields in this form are required to create the token, so the first attributes we want to add to each are the “required” and “title” attributes.

If a field is left empty, this will display a callout with the field title attribute.
HTML Callout
Next let’s add some format validation for the data that is being entered into the fields. To accomplish this without the use of additional JavaScript we can utilize the “pattern” attribute to specify our rules using regex.

These attributes will insure that each input value also passes its field validation pattern before the submit event will trigger. To complete the API integration on this form, all we have to do now is add our JavaScript to request the token and pass it to our server.

But what if HTML5 is not supported?

Most modern desktop and mobile browsers — such as the latest versions of Chrome, Firefox, and IE10+ — already support HTML5 form attributes. Unfortunately, HTML5 attributes aren’t yet supported on the default android browser, Mobile Safari, or any version of Internet Explorer below IE10. Fortunately, there are some battle tested polyfills available such as h5Validate and Webshims which can utilized to add HTML5 validation support to these unsupported browsers.

Displaying API errors

The API can also return it’s own validation errors based on the values entered. In the `errorCallback` function above, you can see that we are alerting a message if an error occurs when creating the token. This will work adequately, but it’s more customary to display error messages above the payment form and clear out the sensitive input fields.
HTML Callout
So to finish up this example, let’s add some logic to our `errorCallback` function to clear the credit card fields and display our error message above the form.

In our next post, we’ll dive into JavaScript field validation using jQuery and walk through some of the more popular validation modules. Come back to the 2Checkout Blog for more information on how to optimize your Payment API integration and read the latest tutorials on all things e-commerce.