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!');
                    e.preventDefault();

                    // remove active class on button
                    // otherwise button would remain highlighted
                    $.mobile.activePage
                        .find('.ui-btn-active')
                        .removeClass('ui-btn-active');
                }
            }
        });
    </script>
Advertisements

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