Example of form validation in a jQuery Mobile Application

This post is more than 2 years old.

Over the weekend I decided to write up a quick example of form validation in jQuery Mobile. Obviously there are many ways you can accomplish this and I just wanted to take my own little spin with it. Here's what I came up with and I'd love to hear how other jQuery Mobile users are doing validation.

Let's start off with a real simple jQM site. It will have a home page with links to two sub pages. My form will be on the second page. To be honest, I could have just built a one page site, but I wanted something with a trivial bit of navigation to it so it felt just a bit more realistic. I won't bore you with all the code (you can view source on the demo yourself), but here is our simple form:

The form consists of 6 fields: username, password, the password confirmation, your favorite color, and your home town. The validation rules should be:

  • Everything but the home town is required.
  • Username, password, and the confirmation must be 5 characters minimum.
  • The password confirmation must match the password.

Pretty simple, right? Without any validation at all, you can take this for a spin here:

Round 1

And if you don't want to bother with that - a quick screen shot (which I generated from Adobe Shadow thank you very much):

Ok, so let's talk validation. It would certainly be cool if we could just use HTML5 form validation, right? I mean, look at the mobile browser support for Canvas:

That's a hell of a lot of green. So obviously - if there is that much support for canvas, which is only mildly useful in practical matters - surely there is even higher support for form validation, something we probably all use every single day.


Ok, so moving on from that, let's talk options. Obviously we can roll our own JavaScript. It isn't terribly difficult to do so. But I thought it might be nice try the jQuery Validation plugin. I've blogged on it before (see links at the bottom) and I liked how simple it made things. I thought I'd give it a shot here and see how it ran.

The plugin provides two main ways of adding validation to a form. You can either add items to a class attribute of your form or supply a list of validation rules when initializing the plugin. Personally, I don't know which I prefer. I wish the plugin made use of a data-attribute instead of a class, but I like seeing my rules in the HTML. I went with that approach but just keep in mind you have the other option as well.

Here's the updated HTML for the register page (just the form bits):

Notice the addition of class="required" to my fields requiring validation. Also note the minlength of the first three fields. This is - pretty much - all it takes. The one big obvious piece missing is the "confirmation must match password" field but that can be handled in a custom rule. I also had to initialize the validation but that's one line of code: $("#registerForm").validate();

So far so good, right? But check out the result:

First, the errors don't really stand out and second - note the error for the drop down. It's actually inside the custom jQM drop down field. Not good. Let's tackle the design first. By default, the validation plugin will use an error class for displaying errors. That means it is pretty trivial to make it look a bit nicer:

Which results in:

Nice. About halfway there. You can demo this version here: Round 2

So what about the weird drop down behavior? We can use another feature of the plugin to handle that. You can use a property, errorPlacement, that allows you to dynamically determine where errors should be written out. While we're at it, we can also go ahead and create the custom rule for password matching.

To be honest, the use of .parent() there was a bit of a guess, but it worked on first try. In case you're curious, to add the custom validation to the second password field I just had to add the name to the class list: class="required passmatch".

You can demo this version here: Round 3

So, what do you think? I'd like to work on this a bit more. On the iPad, the errors are left aligned under the labels, which is kinda cool, but I could also see them being aligned with the fields instead. On desktop it is way off but I kinda figure that is an edge case and not something I'd have to worry about. As always, comments and critiques are welcome.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Sharon posted on 7/30/2012 at 7:45 PM

Ah...jQuery validate(). I love you so. Although I always get tripped up at the same point: errorPlacement styles. My solution was for a tightly styled form that couldn't expand vertically:

errorPlacement: function(error, element) {
// I wanted my errors to prepend the label with a simple *required*

// this was for a checkbox field that sits all on one line, didn't have a label to append to.
if (error.attr('htmlfor') == 'interest') {
// because I was doing my own custom highlight function, I had to add my own "unhighlight"
unhighlight: function(element, errorClass) {

if ($(element).attr('name') == 'interest') {

Comment 2 by Kevin Schmidt posted on 7/30/2012 at 8:20 PM

Like it Ray. I'm doing some jQM sites now and I've just been rolling my own and using a dialog to pop up what the errors in the form are.

Comment 3 by Raymond Camden posted on 7/30/2012 at 8:28 PM

@Kevin: In theory, you could use the plugin to handle the 'check' work and then just write a custom function for the popup. I mean if you were interested in using the plugin for it's validation logic and having REALLY custom UI.

Comment 4 by Misty posted on 7/30/2012 at 9:27 PM

Good One ray, Btw i prefer Validation to be done on server side and show with timeout to come & go :)

Comment 5 by Raymond Camden posted on 7/30/2012 at 9:45 PM

Every time I talk about client side validation I try like hell to ensure I remind folks that they must ALWAYS do server side validation as well. It is CRITICAL. And I forgot this time. Thanks Misty!

Comment 6 by jlig posted on 10/26/2012 at 12:34 AM

Ray, since you are looking at Form Validation in JQM (jquerymobile), can you answer the following question:

- Why won't Spry Validation work with JQM?
- See this post: http://forums.adobe.com/mes...
- Can you work up an example of JQM & Spry that works when using a Form Submit?

I find it curious that Dreamweaver includes both JQM & Spry but I have yet to see an example or post anywhere.


ps: thanks for the simple captcha.

Comment 7 by Raymond Camden posted on 10/26/2012 at 12:56 AM

As far as I know, Spry is no longer being worked on and I do not recommend people use it. I loved it back in the day, but as a framework, it isn't viable anymore and shouldn't be used. To be clear, this is my opinion and not the company's opinion, but I think even "officially" we can say that Spry is no longer in active development.

Comment 8 by jlig posted on 10/26/2012 at 1:19 AM

Sounds good.. regarding that post about Spry, since I could not get it to work back then, I went ahead and used the jquery validation plugin.

One question:
- Here is my form: http://cerberus.clearwave.c...
- Since I'm using JQM collapsible panels, how do I get validation to pop-up a nice box saying "The following fields are required" and then have it take to me to the first required field? as it is now, if the panel is collapsed, you have to go find the required fields..?

Comment 9 by Raymond Camden posted on 10/26/2012 at 4:37 PM

"how do I get validation to pop-up a nice box saying "The following fields are required"

check out jQM's new popups.

"and then have it take to me to the first required field? as it is now, if the panel is collapsed, you have to go find the required fields.."

This would be more complex. If you know which is your first 'bad' field, you could use jQuery to get the parent() which should be the collapsible div and check it's status. I can't remember offhand the exact API, but check the docs. There is a way to see if a div is collapsed or not.

Comment 10 by Ivan posted on 12/23/2012 at 11:26 AM

Thank you so much for this tutorial.

There seems to be a new feature in validator called equalTo

An alternative to check for same password being typed,

<input type="password" name="password2" id="password2" equalTo="password" >

In Javascript (if we want to override default error message)
messages: {
password2: {
equalTo: "Confirmation password must match."


Comment 11 by Raymond Camden posted on 12/23/2012 at 8:48 PM

I don't believe you are right. I tested this in Firefox and Firefox and it didn't work I also checked the HTML5 Spec and it isn't listed there.

Comment 12 by Ivan posted on 12/23/2012 at 9:05 PM

Oh, this is not HTML5 tag, it is part of the validation plugin, please see here.


I am just using the inline way of "calling" equalTo, that's all

It works, I am using it in my code.

Comment 13 by Raymond Camden posted on 12/23/2012 at 9:07 PM

Ah, sorry, I thought I had focused on *just* html5 validation in this post, but I did not - I used a plugin. Sorry! :)

Comment 14 by Pitto posted on 4/13/2013 at 11:12 PM

Hi Raymond!

Thank you for the article...

I'm moving some tiny steps into jQuery Mobile but validation is truely driving me crazy.

I've tried 200.000 tutorials and methods but the main problem is that if I get in the form page with a link that uses data-ajax=false everything works.
If I do it in ajax the form is sent without any kind of validation.
Probably I didn't understand much about where to put the script that should handle validation?

Right now I put in <head> and I've tried this:

<script type="text/javascript">
$(document).bind('pageinit', function () {
$(insert).validate({ // or form #id
rules: {
field: "nick" // field name not #id and has class="required
submitHandler: function (form) {
alert('data submitted');
return false;

But it's not working :(

Can you please help? It is becoming my nightmare.

Comment 15 by Raymond Camden posted on 4/13/2013 at 11:40 PM

Well, I'd begin by ensuring your pageinit code is actually running. If you add console.log('pageinit fired'), do you see it in the console?

Comment 16 by Pitto posted on 4/14/2013 at 5:26 AM

Thank you for your answer, Raymond!

I've tried every kind of tutorial in the internet and I got to this final resolution:

if I use a link to get to the form's page the link has to have or ajax-data=false or rel="external" (but this way I'd lose the cool transitions) otherwise the form validation will not work (but it'll work on reload).

Your suggestion cleverly got to the point: my pageinit is fired _only_ if I modify the incoming link to disable ajax.

I want to pull all my hairs!

Comment 17 by Raymond Camden posted on 4/14/2013 at 9:35 PM

Err, not exactly. pageinit will fire when a JQM page is set up initially. I'd argue that while you have your stuff working now, it is incorrect still. If you want to return to your original code and share it (via Gists) I'd like to help.

Comment 18 by Pitto posted on 4/14/2013 at 11:21 PM

God bless you! :D

Here's my "vanilla" pages:


Comment 19 by Raymond Camden posted on 4/15/2013 at 5:18 AM

Where is the JS? Keep in mind that JQM, by default, creates a "SIngle Page Architecture" type app. So when you go from your first page to your second, unless you override it (as you did), JQM fetches the second page and injects it in the DOM.

Therefore, if you want to have code that runs on a page being created, your current code may need to get more specific.

For example: $(document).bind('pageinit', function () {

Says to listen to ALL pageinit calls. You probably want the one for your specific page. Imagine that page has a <div data-role="page" id="second">. You could do this instead:

$(document).on('pageinit', '#second', function () {

Comment 20 by Pitto posted on 4/15/2013 at 2:21 PM

Oh, sorry!

The js comes from standard google liks for jquery and jquery mobile (of course jquery is before jquery mobile in the head section).

So, excuse me again, if I have simple code like this:
(insert is my form's id)

$('#insert').submit(function() {
alert('Hey, you pressed the button!');
return false;

What should I change?

It's related to a very specific form and, again, it works if I reload the page.

Probably I simply have bad basic understanding of how jquery works but official documentation seems to be not sufficient for me...
I think it's time to buy a book :)

Comment 21 by Raymond Camden posted on 4/15/2013 at 3:00 PM

Well, first, you can use that, but it isn't the same as the jQuery validation plugin. Did you try the code I suggested? It goes into your own JS file that should be included in the <head> of your main HTML file.

Comment 22 by Pitto posted on 4/15/2013 at 6:33 PM

It works! :D

I've simply switched to multi-page and now it works gracefully!

Here's info for anybody who suffered like me:



Thanks for you help and your precious blog, Raymod :)

Comment 23 by Raymond Camden posted on 4/15/2013 at 6:39 PM

You are welcome.

Comment 24 by Pitto posted on 4/21/2013 at 10:28 PM

Hi there, it's me again...

I'm trying to solve a small but annoying issue on jquery form: my form gets submitted every time an user press "go" on android keyboard or enter on the pc.

How can this be solved in the correct way?

Thanks a lot and excuse me for bothering.

Comment 25 by Raymond Camden posted on 4/21/2013 at 11:37 PM

Is this online where I can see?

Comment 26 by Pitto posted on 4/21/2013 at 11:48 PM

Silly me!

Here's the way I've found (correctly working for my tests):

function DisabilitaSubmit()
$('input,select').keypress(function(event) { return event.keyCode != 13; });

You think this is a good method or a bad one?

Thanks :)

Comment 27 by Raymond Camden posted on 4/22/2013 at 10:40 PM

Seems fine to me.

Comment 28 by Eric Burnley posted on 4/30/2013 at 2:08 AM

Hi Raymond- sorry to post to an old thread, but thought I'd ask since this is related.
With the new markup format of text inputs in <a href="http://view.jquerymobile.co...">jQM 1.3.1</a>, it seems error placement in jQuery Validation gets thrown off- jQM 1.3.1 adds a div wrapper around the input, so that div is now what I need to style rather than the input, and the .valid class applied to the input as well needs to be on that parent div. I know I can control this via errorPlacement, but it seems like there should be a quicker solution to this - before I update all my errorPlacement calls. Any ideas?

Comment 29 by Raymond Camden posted on 5/1/2013 at 1:28 AM

Um... no, outside of the errorPlacement idea.

Comment 30 by Eric Burnley posted on 5/1/2013 at 9:56 PM

No problem, thanks for looking. Here's my initial solution, which shows the css and js to change for the new markup format.

Comment 31 by Steve Oldner posted on 5/15/2013 at 10:19 PM

Very nice and easy to follow.

Comment 32 by Steve Kemp posted on 6/24/2013 at 3:21 AM

HI Ray,

I'm working on my first jQuery Mobile site with form validation and found this great post. My target audience is iPad users only - as you noted in your post the positioning of the errors appears on the left of the labels for input fields, not under the fields themselves.

Is there a way to change this so they appear under the fields, just like on an iPhone?


Comment 33 by Raymond Camden posted on 7/3/2013 at 6:38 PM

Steve - all I can suggest is messing w/ errorPlacement.

Comment 34 by Mario Mata posted on 7/6/2013 at 2:40 AM

Hi Raymond,

i hope you can solve my problem, i have a form that uses your example... but everytime I try the validation, it doesn`t work... I have to regresh the page and then it works perfectly, but only if I refresh...



Comment 35 by Mario Mata posted on 7/6/2013 at 2:55 AM

i forgot.. i use this to call the validation:

$(document).ready(function() {



Comment 36 by Raymond Camden posted on 7/6/2013 at 6:09 AM

You can't use it in document.ready as the form may not be loaded then in jQM. Look at my examples - I use the pageshow event instead.

Comment 37 by Mario Mata posted on 7/6/2013 at 10:06 PM

Alright! Raymond... also i want to share one point... maybe most of people knows it, but I forgot than Jquery mobile at the time of changuing pages, it just load the <BODY> of the next page...

also change the script to pageshow solve the problem.

Thank you so much Raymond!!

Comment 38 by Raymond Camden posted on 7/6/2013 at 10:09 PM

To be anal, jQM is loading the <div data-role="page"> aspect of the page, not just everything inside <body>.

Comment 39 by Mario Mata posted on 7/7/2013 at 7:36 AM

oh.. well.. good to know master hehe
thank you for all the help.

you really save my ass.


Comment 40 by joan posted on 7/23/2013 at 12:15 PM

Just for the record, in the errorReplacement function, instead of using:
if (element.attr("name") === "favcolor") {

it's nicer and more portable this way:
if ($(element).is("select")) {

don't u think?

Comment 41 by Raymond Camden posted on 7/23/2013 at 3:40 PM


Comment 42 by Arun.s posted on 8/5/2013 at 7:00 PM

very nice

Comment 43 by Daniel posted on 9/17/2013 at 6:32 PM

Thanks for this useful example, Raymond. It's really helpful!

I've got all the files (index.html, register.html, some.html, main.js and app.css) in the same directory (as you do in demos/2012/jul/30/round3) but for some reason I get 'Error Loading Page' when submitting the form and the validation doesn't happen.

I've downloaded the jQuery Validation plugin (jquery-validation-1.11.1.zip), unzipped it and copied it into the same directory, but it still doesn't work.

Please I'd appreciate if you could help me solve this little issue. Thanks!

Comment 44 by Raymond Camden posted on 9/19/2013 at 6:09 PM

FYI, Daniel and I worked it out in email.

Comment 45 by Daniel posted on 9/19/2013 at 6:24 PM

:) I know, Raymond. Thanks for that!

Comment 46 by Simon posted on 10/24/2013 at 7:23 PM

Thanks , im quite surprised JQM haven't implemented a basic validation into the core files as most people only require the basic submit / validation functions.

Comment 47 by saboor posted on 2/14/2014 at 3:53 PM

nice article, did'nt knew the abc of jquery validation but after reading this article, i have use it in my project. thanks author.

Comment 48 by Jack posted on 5/26/2014 at 11:34 AM

Hi Raymond. Excellent article!

I have the same problem with Daniel, for some reason I do not know I get 'Error Loading Page' when submitting the form and the validation doesn't happen.

I am using google chrome for testing.

I would be grateful if you could help me solve this little issue. Thanks!

Comment 49 by Raymond Camden posted on 5/26/2014 at 6:09 PM

If you can share the URL with me, I can take a look.

Comment 50 by Jack posted on 5/26/2014 at 9:12 PM

Thanks for the reply.

Actually I am trying to test your sample. When I submit the form without any input, validation is not triggering. It is trying to load form action. As I said I am testing the html page in chrome on desktop computer.

I uploaded the html page to this location:


Thanks in advance

Comment 51 by Raymond Camden posted on 5/26/2014 at 9:19 PM

If you run my code as is, it is trying to post to a ColdFusion script. If you don't have that installed, it will not work. You mentioned "chome on desktop computer" - you should also have a local web server installed too. You can then change the action value to something.html. Your form data won't be shown on the other page, but you can test the JS code at least.

Comment 52 by Jack posted on 5/26/2014 at 9:58 PM

If I just set

<form action="#" method="post" id="registerForm">

should this not show validation errors in the page?

I was expecting the js code work before form action but it still does not...

These all may be naive questions since I am still html , js newbie....

Comment 53 by Raymond Camden posted on 5/26/2014 at 10:55 PM

It should work, yes, but if you can't put it on a web server that I can see, I can't help more. You can try using your browser devtools. It may show a better error message.

Comment 54 by Tim posted on 6/29/2014 at 8:22 AM

This is a really cool jump start on the validation plugin. I got it up and running in just a few minutes.

Is there a clean way to tell when there has been a validation problem so that I can stop the submit of the form (not really a submit but the processing of the click event behind a button)?

Comment 55 by Raymond Camden posted on 6/29/2014 at 7:52 PM

Hmm - are you saying the form post is still going through even when an error occurs? It should be stopping automatically.

Comment 56 by Saurabh posted on 6/14/2015 at 10:29 AM

Hi, can you post similar workout for date and time field for jquery mobile with jquery validation.
Validation error doenst show up for date fields as they are hidden and wrapped by another display div over.
As the field is hidden, so the validation plugin doesnt work.
Any help would be great.

Comment 57 (In reply to #56) by Raymond Camden posted on 6/22/2015 at 2:49 PM

Sorry - haven't worked on this one in quite a few years.