how to cancel page transition in jqtouch

Question

I am building a simple app in jqTouch that has a wizard style set up, a page of inputs, a second page of inputs and then a results page.

I want to write some validation for the form and prevent the user going to the next page if they dont fill the form out correctly.

Here is the test method I have written:

      $('#page1').bind('pageAnimationStart', function(e, data) {
          if(data.direction === 'out') {
              if($("#testinput").val() == "") {
                  $("#validation").text("validation error");
                  e.stopPropagation();
                  return false;
              }
          }
      });

The event is run by jquery trigger() which says I can stop it using e.stopPropagation(); or return false;.

I have tried both individually. The validation error message appears but the page still passes to the next.

I have checked the documentation but it is pretty sparse and I couldn't find any code examples that show how this is done?

score 1 · Answer 1 · answered Jul 04 '12 at 11:51

Try binding the function to the click & touchstart so that the propogation stops before the page animation starts.

$('#page1').bind('click touchstart touchend', function(e) {
      if($("#testinput").val() == "") {
          $("#validation").text("validation error");
          e.stopPropagation();
          return false;
      } 
  });

how to cancel page transition in jqtouch

1 Answers1