JQuery Mobile & JQuery Validations – Tap vs. Click

I have been developing a mobile app using the JQuery Mobile platform for the past few months. My goal was to integrate JQuery Validations plugin into my app in order to perform form validations.

Everything went slick and well until I encountered the following bug:
When accessing the site via a mobile device and entering text into some form text input element the keyboard is shown. If I clicked the GO button on that keyboard the form would ignore any validations I set and submitted. The same happened when I was accessing the site from a PC and pressed the ENTER key while focused on a text input. My BackboneJS view had the following structure:

If you are working with JQuery Mobile you are probably familiar with the “tap” event which it provides. It is supposed to shorten the time which takes the “click” event to be triggered hence providing faster response time to mobile “tap” actions, so most of the time I use it and not click (even though I can’t really confirm that I feel any difference in the responsiveness of those two events).

I found out that changing the event to “click” instead of “tap” does go through the validation thus solving my problem. Apparently both PC ENTER key press and mobile GO key press trigger the click event of the form submit button and not its tap event. There is no choice here, but to give up on the tap event since binding both tap and click simultaneously will trigger the submission twice when you actually click the button since both of the events are triggered.

Bottom line: even though JQuery Mobile generally encourages you to use the tap event, current mobile browsers raise the click event when pressing the GO button on the keyboard and not the tap event. Referencing the tap event may become inconsistent when integrating JQuery Validations plugin into your mobile app. In this case, there’s no choice but to give up on the tap event and bind the click event instead.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s