How to use jQuery to stop your users filling up your database with SHOUTING (or all-capitals form submissions)

Do you collect form submissions from your users and find yourself having to manually amend entries THAT ARE SUBMITTED ENTIRELY LIKE THIS? Most of us don’t want to collect information in that format. Even where case shouldn’t matter in database queries, it makes it harder for humans to read, and on top of that just looks plain wrong to anyone that likes consistency.

At my previous employer, the AUA, we get quite a few of our international event delegates submitting entire forms (names, contact details, dietary requirements — you name it) entirely in capitals. The all-caps responses look out of place when they’re shown on delegate lists, name badges, and certificates of attendance, so my colleagues manually edit them — either retyping the information or copying the offending text, pasting it into a website like ConvertCase.net, and then copy and pasting the sanitised text.

I joked with a colleague this afternoon that we should show a JavaScript alert telling these users off for creating extra work for her, but then I realised I could actually do something much better. With a few lines of a regular expression and jQuery selector, we can attach code to every form field on a page that prevents entirely capitalised entries.

Try it out on the form below. See how far you get if you try to enter your name ALL IN CAPITALS. Grab the code from the CodePen below, or read on for a bit more information.

The regular expression in the code is clever enough to prevent people entering ADAMS as a name, but will accept capitalisation like Adams, or even names like McAdams etc. The script will accept any number of capitalised letters, as long as each one is followed by a lowercase character. This is fine for name fields, but what if someone wants to tell us they work at the BBC, or that their post should be addressed to them at GCHQ?

There are three solutions to this. The first involves changing the second figure given in the regex to allow for more than one capital letter in a row — perhaps creating a second function to apply to fields where acronyms might be used. The others would be to modify the jQuery input selector to only apply the NOCAPS option to certain fields (or fields within a specific parent element such as a particular form), and the other would be to use jQuery’s unbind function to remove the NOCAPS option from a selection of fields. This is what I’ve done in the demo above, where entering HEFCE in the organisation field is fine, but it would be filtered in the name fields. You will probably want to do unbind the NOCAPS option from postcode fields too, to allow capitalised postcodes to be entered.

Using jQuery to apply NOCAPS to all the form fields on a page (and then remove it from one or two) works for me, but you can pick whichever is more suitable for your use case.


Originally published at wolstenhol.me on July 2, 2013.

Show your support

Clapping shows how much you appreciated Phil Wolstenholme’s story.