pancake theorem a tech blog by jenn schiffer

I developed a site that was just released to a small number of beta users. It required the collection of data, and some users would prematurely submit the form by hitting their enter key – which triggers the form’s submit button. Proper validation made sure that we received the required data, but it didn’t give the user a chance to provide non-required data.

For example, let’s say you have a form with one text area and a submit button.

<form>
   <label for="name">Enter your name:</label>
   <input type="text" class="text-input" name="name" />
   <input type="submit" value="Submit your name!" />
</form>

If you have one text input, then preventing a premature submit is not a problem. Let’s say you have 10 text inputs, not all required, though. Even if data is not required, you don’t want to take away the user’s chance of entering it. Non-required doesn’t necessarily mean not useful; in that were the case, we wouldn’t even have those fields in the form.

Fixing this is easy, though. You just prevent the default action of the carriage return key (character code 13) from happening.

$('input.text').keydown(function(event){
   if(event.keyCode == 13) {
      event.preventDefault();
      return false;
   }
});

I made sure to do the keydown() call only on items with class=”text” because I don’t want to take away the keyboard’s ability to submit the form if the user tabbed over to the submit button. I want to make the form more accessible to the user, not less!

Here is a nice, clear list of character codes, such as the 13 I used for the carriage return.

posted March 26, 2012 Comment