JQuery Mobile – Stop Page Transition if Current Page does not validate.

<a> link button validation before transition to another Local, internal linked “pages”

[Question] I have two form pages and a next button to move from page 1 to page 2. When the next button is clicked, I wanted to validate all the required fields before moving to the second page. How do you make the page transition stop, when validation fail on page 1?

I ran into a problem when trying to validate a few radio button groups on a page before the page transition happened in JQuery Mobile.

I did not want the page to change before I managed to check if the user had managed to select an option from the screen.
I am using JQuery Mobile Events to trap the page change and cancel it if there is something wrong with the page I am trying to move from.
Because there were more than one radio button group on the page, I got the names of all the groups and then looped through them. If I found one unchecked, I would stop the transition with e.preventDefault().

I hope this helps someone.

 <script type="text/javascript">
        $(document).bind('pagebeforechange', function (e, data) {
            var to = data.toPage,
                from = data.options.fromPage;

            if (typeof to === 'string') {
                var u = $.mobile.path.parseUrl(to);
                to = u.hash || '#' + u.pathname.substring(1);
                if (from) from = '#' + from.attr('id');
                var blnchecked;
                blnchecked = true;
                //find all radio groups on a page
                var radio_groups = {}
                $(from + " input[type=radio]").each(function () {
                    radio_groups[this.name] = true;

                for (group in radio_groups) {
                    if_checked = !!$(from + " input[name=" + group + "]:checked").length;
                  //  alert(group + (if_checked ? ' has checked radios' : ' does not have checked radios'));
                    if (!if_checked) {
                        blnchecked = false;

                if (blnchecked==false) {
                    alert('Please select an option!');

                    // remove active class on button
                    // otherwise button would remain highlighted

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.