CODEWITHSUNDEEP
validationjquery-mobilereloadpage-init
user2449470
user2449470

Reputation: 1

JQuery Mobile Validate after changePage

I'm using JQuery Mobile with a form that changes server side. I need to reload the page so the most recent form is included on the page. The form also needs validation.

I'm able to get the validation to work once but once until a submit. The page successfully is refreshed and the form appears but the validation is gone and if I submit, a standard submit is done instead of a changePage.

The on pageinit seems to be firing every time. I've been pulling my hair out on this one. It seems like this should be so simple.

<?php //
   session_start();
   if (isset($_SESSION['mytest']))
      $_SESSION['mytest']++;
   else
      $_SESSION['mytest'] = 1;
    $s = $_SESSION['mytest'];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>mytestout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js">            </script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
</head>
<body>
   <div data-role="page" data-theme='b' id="testit" >
     <div data-role="content" class="content" id="cart" style="margin-top: 25px; margin-left: 40px">

       <p> counting  session var = <?=$s?> </p>

         <form id="myform">
           <input type="text" name="myname">
           <input type="submit">
         </form>

     </div>
   </div>


<script>

function submitme(e) {
   $.mobile.changePage( "#testit", { transition: "slideup", changeHash: false, reloadPage: true, allowSamePageTransition: true });
}


$(document).on('pageinit', function(){ //

$("#myform").validate( {
      rules: {
       myname: "required"
       }
   ,submitHandler: function(e) { submitme(e);}
 });
});
</script>
</body>
</html>

Upvotes: 0

Views: 220

Answers (1)

J&#246;rn Zaefferer
J&#246;rn Zaefferer

Reputation: 5705

The problem here is the 'pageinit' event, which runs just once per page (its also deprecated). You'd have to use the pagecontainershow event, which runs each time the page is shown. That should initialize the form validation again, making it work for each time its rendered. Note that I haven't tested that solution, yet.

Upvotes: 0

Related Questions