jQuery Mobile Form Validation

I'm trying to add some validation to some form fields in a jQuery Mobile site I'm building with a PHP back end.

I've done this in the past successfully using the jquery.validate plugin but I'm having trouble getting this to work with jQuery Mobile.

As an example I have a form similar to the loginForm.php that is in the PHP example site of the "Master Mobile Web Apps with jQuery Mobile" that I recently purchased (it's the login form at http://store.elated.com/products/jquery-mobile-book/task-tango/).

I would like to add validation like this example:

http://jsfiddle.net/elijahmanor/3Rmdm/1/

but having trouble getting it to fire when I click the submit button. From what I've read I can't use the usual:

$(document).ready(function(){

approach but not sure what to replace this with?

Would really appreciate any assistance here.

Thanks

@databuzz: Thanks for buying my book

Have you tried jQuery Mobile's pageinit event?

$('#myPage').live( 'pageinit', function() {
  ...
} );

This fires just after jQuery Mobile has enhanced the page. It's the jQM equivalent of $(document).ready() (see page 210 in my book).

Cheers,
Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Thanks Matt,

Sorry I didn't see that in the book. It's working now, however only the first time.

If I enter an incorrect username/password it returns the login.php page again with an error at the top, however this time it doesn't alert me if I attempt to login without entering a username/password.

Any ideas why it's only working on the first page load?

thanks,
Andrew

Hi Andrew,

Hmm, in that case try binding to pagebeforeshow or pageshow instead:

$('#myPage').live( 'pageshow', function() {
  ...
} );

These events fire each time the page is displayed (p220 in the book).

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Hi Matt,

I've just had a chance to play with this again. I've tried both pagebeforeshow and pageshow and I'm getting the same result as before - it validates the first time the form is shown but if I submit the form with invalid credentials and it fails every time after that I can submit the form with empty fields.

Any other ideas what might be going on here?

@databuzz: Are you seeing any errors in the JavaScript console?

Can you post the page on jsfiddle/jsbin perhaps, then I can take a look?

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Hi Matt,

Before I post the code for the pages I thought I should check something basic. I have 2 php pages that are relevant here:

index.php
login.php

When you start at index.php it checks to see if you have a valid session, if not it requires login.php which has the login form with the username/password fields, otherwise it continues on. This is somewhat similar to the first example site in your book.

At the moment I've got the script:


<script type='text/javascript'>
$('#login').live( 'pageshow',function(){

$("#frmLogin").validate({
errorLabelContainer: "#errorMessages",
rules: {
username: {
required: true,
},
password: {
required: true,
},
},
messages: {
username:"Please enter your User Name",
password:"Please enter your Password",
}

});
});

</script>

on the login.php page. I've tried moving it around but nothing has made a difference so far. I'm not getting any console errors in Chrome or Safari.

Is that the correct place to locate the script?

@databuzz: Not sure - it might depend on exactly where you're including the script in the final markup that's sent to the browser. (head? body?)

You might also have a caching issue possibly.

You could also try redirecting to a login page, rather than including the login form within index.php. That might work.

If you can post the code on jsbin then I can get a better idea of the problem.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/