1

在以下代码片段中，我尝试使用 JQuery Mobile 构建登录页面。我尝试使用 JQuery 验证插件来验证输入。如果验证成功，我使用 AJAX 将登录数据发布到服务器中的 PHP 代码。这是我的代码应该做的，但是，它所做的只是将我重定向到第一页（语言选择屏幕）。你能帮我找出我的代码有什么问题吗？谢谢

<!DOCTYPE html>
<html> 
<head> 
   <meta charset="utf-8"> 
   <title></title> 
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
   <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
   <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
   <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
   <script src="jquerytest.js"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1">
</head> 
<body>
 <!-- Select Language Screen -->
 <div data-role="page" data-theme="c" id="select_language_screen">
     <div data-role="header"> 
           <h1>Header</h1> 
     </div> 
     <div data-role="content">     
           <ul data-role="listview" data-inset="true" data-dividertheme="b" id="listview_language"> 
                 <li data-role="list-divider">Select a langauge</li>
                 <li data-name="en"><a href="#login_screen">English</a></li>
           </ul>            
     </div>   
    <div data-role="footer" data-position="fixed">
     <h4>Footer </h4>
    </div>
 </div>
 <!-- Login Screen -->
 <div data-role="page" id="login_screen" data-add-back-btn="true">
    <div data-role="header">
        <h1>Header</h1>
    </div>

    <div data-role="content">
        <form id="login_form">
            <div data-role="fieldcontain">
                <label for="mobile_number" id="login_mobile_no_label">Mobile Number</label><br>
                <input type="text" name="mobile_number" id="login_mobile_no_input" class="required number"/><br><br>

                <label for="password" id="login_password_label">Password</label><br>
                <input type="password" name="password" id="login_password_input" class="required"  />
                <h3 id="notification"></h3>
                <button data-theme="b" id="submit" type="submit">Submit</button>
            </div>
        </form>
    </div>
    <div data-role="footer" data-position="fixed">
        <h3>Footer</h3> 
    </div>
    <script>
        function onSuccess(data, status)
        {
            data = $.trim(data);
            $("#notification").text(data);
        }

        function onError(data, status)
        {
            $("#notification").text("Could not connect to the server!");
        }        

        $(document).ready(function() {
            $("#submit").click(function(e){
                e.preventDefault();
                var validator = $(form_id).validate({
                    invalidHandler: function() {
                        if(validator.numberOfInvalids() <= 0)
                        {
                            var form = $("#login_form");
                            $("#submit",form).attr("disabled","disabled");
                            var formData = $("#login_form").serialize();
                            $.ajax({
                                type: "POST",
                                url: "login.php",
                                cache: false,
                                data: formData,
                                success: onSuccess,
                                error: onError
                            });
                            $("#submit").removeAttr("disabled");
                            return false;
                        }
                        else
                            alert("Please fill");
                    }
                }); 

            });
        });
    </script>
</div>

4

1 回答 1

2
于 2013-09-28T17:10:10.613 回答