jQuery移动表单验证无结果 [英] jQuery mobile form validation with no results
问题描述
我正在尝试学习jQuery Mobile的jQuery表单验证.我一直在尝试本教程复制，但必须对资源链接做一些错误，导致html看起来不错.理论上，当用户按下Enter键且电子邮件和密码字段为空白时，将出现一条消息，告诉用户此字段是必填字段".
I am trying to learn jQuery form validations for jQuery Mobile. I keep coming across this tutorial, which I am trying to replicate but must be doing something wrong with the resource links cause the html looks good. In theory, when a user hits enter and the email and password field are blank, a message should appear telling the user that "this field is required".
这是完整的代码:
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javacsript">
$( "#frmLogin" ).validate({
submitHandler: function( form ) {
alert( "Call Login Action" );
}
});
</script>
<style type="text/css">
label.error {
color: red;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
margin-top: 0.5em;
width: 100%;
float: none;
}
@media screen and (orientation: portrait){
label.error { margin-left: 0; display: block; }
}
@media screen and (orientation: landscape){
label.error { display: inline-block; margin-left: 22%; }
}
em { color: red; font-weight: bold; padding-right: .25em; }
</style>
</head>
<body>
<div data-role="page" id="login">
<div data-role="header">
<h1>Acme Corporation</h1>
</div>
<div data-role="content">
<form id="frmLogin">
<div data-role="fieldcontain">
<label for="email">
<em>* </em> Email: </label>
<input type="text" id="email"
name="email" class="required email" />
</div>
<div data-role="fieldcontain">
<label for="password">
<em>* </em>Password: </label>
<input type="password" id="password"
name="password" class="required" />
</div>
<div class="ui-body ui-body-b">
<button class="btnLogin" type="submit"
data-theme="a">Login</button>
</div>
</form>
</div>
</div>
</body>
</html>
推荐答案
通常，您将初始化DOM ready事件处理程序中的所有jQuery插件.这样可以确保在调用和初始化.validate()之前构造HTML.如您所见，您在HTML表单存在之前先将其调用.将其放入就绪事件处理程序中可以防止代码在页面的HTML完全构建之后被触发.
Typically, you'd initialize any jQuery plugin within a DOM ready event handler. This ensures the HTML is constructed before .validate() is called and initialized. As you can see, you're calling it up top before the HTML form exists. Putting it inside a ready event handler prevents the code from firing until after the page's HTML is fully constructed.
由于您使用的是jQuery Mobile(它使用ajax加载页面)，因此请使用这样的.on('pageinit')处理程序...
Since you're using jQuery Mobile (it uses ajax to load pages), use a .on('pageinit') handler like this...
$(document).on('pageinit', function() { // <-- ensures the DOM is ready
$("#frmLogin").validate({
// your rules & options
});
});
工作示例: http://jsfiddle.net/5p9N5/
Working DEMO: http://jsfiddle.net/5p9N5/
在您的浏览器中，执行<查看源代码> 本页的内容，以查看脚本的用法适当地包括在内. http://jsfiddle.net/5p9N5/show/ ....
From your browser, do a "view source" of this page to see how the scripts are properly included. http://jsfiddle.net/5p9N5/show/....
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jsFiddle demo</title>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).on('pageinit', function(){
$('#myform').validate({ // initialize the plugin
// rules & options
});
});
//]]>
</script>
</head>
<body>
<form id="myform">
.....
</form>
</body>
</html>
对于非jQuery移动网页，通常将jQuery代码封装在这样的.ready()处理程序中...
For a non-jQuery-mobile webpage, you'd typically enclose your jQuery code within a .ready() handler like this...
$(document).ready(function() { // <-- ensures the DOM is ready
$("#frmLogin").validate({
// your rules & options
});
// any other jQuery
});
这篇关于jQuery移动表单验证无结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
