Jquery mobile - validating a multi-page template using jquery validate.js

Question

When you click the next button, verification is performed for the current page and when you click submit, verification is performed for all pages using

var validator = $("#frmAddstore").data('validator');

validator.settings.ignore = "";

Now I find a problem when setting focus on a hidden page. How to navigate an error page?

I can get an error element if on the current page I can set focus via $(this).find(":input.error:first").focus() . If his hidden page is not able to set the focus, also I do not know the pageid or are divided into changepage.

But I can get the item id using $(this).find(":input.error:first").attr("id") Is there a way to get the div id from the id of the element?

I created jsfiddle to show the problem. jsfiddle.net/U4RPf/14

Answer 1

To get the error page

 var idErrorPage = $(this).find(":input.error:first").parents("div:jqmData(role='page')").attr("id") 

Change to this page

 $.mobile.changePage( "#" + idErrorPage ); 

I created jsbin, it does not use validate.js, but it should show you what you need to know http://jsbin.com/awaluw/edit#html

Full working example: http://jsfiddle.net/U4RPf/15