CODEWITHSUNDEEP
jqueryjquery-mobilejquery-validate
vaindil
vaindil

Reputation: 7864

jQuery validation only works on page refresh

I have the code in this jsFiddle on my site. The code there is exactly what is implemented on my site, with the exception that my site also has <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> after the <meta> tag (as jsFiddle calls it automatically; this is present in the below code). The code works as expected on jsFiddle, but on my site the validation does not work unless the page is refreshed or the back button is clicked after the first submission. The form redirects to the logins.php script (blank right now), and after pressing the back button the validation works fine. I have data-ajax="false" on the form. What can I do so that the form validation always works, not just after refreshing or going back?

Here's the code:

<!DOCTYPE html>
<html>
<head> 
    <title>Welcome</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#loginForm").validate();
        });
    </script>
    <style type="text/css">
        label.error {
            font-weight:bold;
            color:red;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

</head> 
<body>
    <div data-role="page" id="login">
        <div data-role="header"><h1>Log In</h1></div>
        <div data-role="content">You can use the fields below to log in to your account.<br>
        <br>
        <form action="logins.php" method="POST" id="loginForm" name="loginForm" data-ajax="false">
            <label for="email" class="ui-hidden-accessible">Email Address:</label>
            <input type="text" id="email" name="email" value="" class="required email" minlength="5" placeholder="Email Address" />
            <label for="pass" class="ui-hidden-accessible">Password:</label>
            <input type="password" id="pass" name="pass" value="" class="required" minlength="5" placeholder="Password" />
            <input class="submit" data-role="submit" type="submit" value="Submit" />
        </form><br>
        <br>
        <a href="index.php" data-role="button" data-transition="slide" data-direction="reverse">Return to home page</a>
        </div>
        <div data-role="footer"><h4>&copy; Me 2013</h4></div>
    </div>
</body>
</html>

Upvotes: 1

Views: 1402

Answers (1)

andleer
andleer

Reputation: 22578

http://jquerymobile.com/demos/1.2.0/docs/api/events.html

$(document).ready() should not be used with jQuery Mobile. Use $(document).bind("pageinit") instead.

Also, jQuery Mobile 1.2 supports jQuery Core 1.8.2 (not 1.8.3).

Upvotes: 2

Related Questions