Question

在下面的代码片段中，我尝试使用JQuery Mobile构建登录页面。我尝试使用JQuery验证blugin验证输入。如果验证成功，我使用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>

Answer 1

jQuery mobile不能那样工作。您真的需要阅读有关jQM的更多信息。基本上没有任何代码被执行，即使有人从另一个页面访问此页面，甚至更少的代码将被执行。首先你需要知道的是你的表单已经启用了ajax，每个表单请求都是一个ajax调用，除非它有data-ajax ='false'属性，并且每个链接都是一个ajax请求，除非它是外部的，有rel =“ external“，data-ajax ='true'或目标属性。

你应该知道的第二件事是jQM删除了你的大部分代码而你的整个$（document）.ready代码块都无法正常工作，因为只要jQM重建DOM就会删除它...这是怎么回事完全正常我不确定。我遇到了你自己寻找答案的问题，我很新，并且正在做我的第一个jQM项目，之后我喜欢它用于我正在使用它，如果你需要很多其他jquery插件和自定义脚本jQM可能不是正确的解决方案。

所以这就是你应该做的，你应该把你的表单写成没有javascript就可以工作，然后在两个输入和required或者pattern= “[0-9]”中添加type="number"属性电话号码，HTML5浏览器，这是你在智能手机上处理的，因为他们没有IE等：D自动验证，甚至输出一个很好的错误。

有关更多验证规则，请参阅http://www.pageresource.com/html5/input-validation-tutorial/。

JQuery Mobile验证和AJAX POST表单提交

1 个答案: