Our previous post discussed what we did to improve our checkout page. In this post I’ll share with you some of the technical work we did in that process and mostly: the libraries and techniques we used for checkout field validation. We’ve tried several libraries in the process but settled on these as they were the easiest to implement and the most robust.

A lot of our ideas for form design were taken from Luke Wroblewski’s awesome classic on form design: Web Form Design, Filling in the Blanks.

Credit Card validation

The first thing we decided that we should fix was our inline credit card field validation. Entering credit card info is something a user can easily make a mistake in. As a result the earlier in the process you spot that mistake, the better it is. We started using Stripe for our payment processing (Stripe is awesome, absolutely freaking awesome) and while searching for a good library to validate credit card fields we stumbled upon one of Stripe’s projects: jQuery.payment.

If you know a little bit of jQuery, this plugin makes it ridiculously easy to both format and validate credit card form fields. Let’s start with formatting the form fields nicely: we want a nicely formatted number that is limited to 16 numbers. It’s as simple as doing this:

$('#card_number').payment('formatCardNumber');

This makes sure the numbers are grouped into sets of 4. But you only see that once you start typing, and we wanted it to be immediately obvious that that’s the field you need to enter your credit card info in. So we added a placeholder attribute to the input field”

placeholder="•••• •••• •••• ••••"

We also did a bit of CSS trickery to add a credit card icon to the right of the input field, to remove the last bit of confusion:

input#card_number {
  background: url('images/placeholder.png') 175px 4px no-repeat;
  background-size: 25px 19px;
}

Now our credit card input field looks like this when empty:

When we start typing a number into it, it starts validating the number and recognizing which type of card we’re using:

No I didn’t just give away my credit card number, this is a Stripe test card number. The recognition of the credit card is done by the script automatically, it adds a class to the input field which we use with the following simple CSS:

input#card_number.visa {
  background-image: url('/images/icons/visa.png');
}

input#card_number.mastercard {
  background-image: url('/images/icons/mastercard.png');
}

input#card_number.discover {
  background-image: url('/images/icons/discover.png');
}

input#card_number.amex {
  background-image: url('/images/icons/amex.png');
}

Of course there’s more than just a number to a credit card: there’s a name on card field, an expiry field and a CVC code, all of which are needed and need their own validation. We validate the CVC field using the jQuery.payment module as well, I’d suggest reading its extensive documentation on how to best do that for your checkout module.

Inline validation

For validation of the other credit card fields and all non-credit card form fields we used the jQuery validation library. This simple script makes it very easy to define rules for input fields and other types of form fields. It is very well documented, but to convince you to use it, let me show you the rules we use for our checkout field:

$("#edd_purchase_form").validate({
  rules : {
    edd_email : {
      required: true,
      email : true
    },
    edd_first : "required",
    edd_agree_to_terms: "required"
  },
  messages: {
    edd_first : "Please enter your first name",
    edd_email : "Please enter a valid email address",
    edd_agree_to_terms: "<strong>Error</strong> - Please accept our terms: ",
    card_name : "Please enter the name on your credit card",
    card_address : "Please enter the billing address of your credit card",
    card_zip : "Please enter the zip / postal code of the billing address of your credit card",
    card_city : "Please enter the city of the billing address of your credit card",
    billing_country : "Please enter the country of the billing address of your credit card"
  }
});

That’s all. It automatically validates on “keyup”, so when you are editing a field and on submit. As you can see, you can edit the error texts yourself, we show them like this:

It’s really very simple to use, so go and play with it.

Conclusion

The jQuery.payment and jQuery.validate libraries have significantly (a word we don’t use lightly at Yoast these days) increased our conversion. There’s no valid reason left not to have proper validation on form fields with simple libraries like these being available. So go and implement them! If you have more tips for form validation: let us know in the comments!

This post first appeared on Yoast. Whoopity Doo!