JQuery mobile：如何验证表单并在页面上显示错误消息 [英] JQuery mobile: how to validate the form and show error message on page
本文介绍了JQuery mobile：如何验证表单并在页面上显示错误消息的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您好我是JQM的新手，我正在尝试使用JQM登录页面。
Hi i am new to JQM and i am trying to work on a JQM login page.
任何人都可以帮助我如何进行表单验证并显示错误在用户名和密码文本框下面，如果它们是空的，并且当登录无效时我必须在表单顶部将其显示为错误消息。
can any one help me how to do form validation and show the errors below the username and password text box if they are left empty and also when there is a invalid login i have to show it as an error message on top of the form.
这是我的HTML：
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.4.2.min.css" />
<script src="jquery.mobile/jquery.js"></script>
<script src="js/login1.4.2.js"></script>
<script src="jquery.mobile/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<input type="hidden" id="session_key" />
<div data-role="page" id="login" class="" data-ajax="false">
<div data-role="header" >
<h3>Login Page</h3>
</div>
<div data-role="main" class="ui-content" >
<form id="check-user" data-ajax="false" class="ui-bar ui-bar-a ui-corner-all" >
<fieldset >
<div class="ui-field-contain" >
<label for="username" class="required">Enter your username:</label>
<input type="text" value="" name="username" id="username"/>
<label for="password">Enter your password:</label>
<input type="password" value="" name="password" id="password" />
</div>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-b" name="submit" id="submit" value="submit">Submit</button>
</fieldset>
</form>
</div>
</div>
<div data-role="page" id="panel-main" >
<div data-role="header">
<h1>main panel</h1>
</div>
<div role="main" class="ui-content ">
<p>main panel</p>
</div>
</div>
</body>
</html>
这是我的JS档案
$(document).on('pageinit', '#login', function() {
$("#submit").on("click",function(){
$.ajax({
url: "login_back.php",
type: "GET",
data: $("form#check-user").serialize(),
async: true,
callback: 'jsonLogin',
dataType:'jsonp',
success: function (result) {
if(result.status==true)
{
$('#session_key').val(result.session_key);
$( ":mobile-pagecontainer" ).pagecontainer( "change", "#panel-main" );
}
else
{
alert("Wrong Username/Email and password combination");// here insted of alert i want to display it as error message in the form
}
},
error: function (request,error) {
alert('Network error has occurred please try again!'+error);
},
});
return false;
});
});
推荐答案
只需将jQuery验证插件与jQuery Mobile结合使用。
Simply combine jQuery validation plugin with jQuery Mobile.
工作示例： http://jsfiddle.net/Gajotres/RLJHK/
<div data-role="page" id="home" data-theme="b">
<form id="form1">
<div data-role="header">
<h2>Get Update</h2>
</div>
<div data-role="content">
<div data-role="fieldcontainer">
<label for="fname" data-theme="d">First Name:</label>
<input type="text" id="fname" name="fname" data-theme="d" placeholder="Enter First Name"/>
<br />
</div>
<div data-role="fieldcontainer">
<label for="lname" data-theme="d">Last Name:</label>
<input type="text" id="lname" name="lname" data-theme="d" placeholder="Enter Last Name"/>
</div>
<div data-role="fieldcontainer">
<label for="email" data-theme="d">E-mail Address:</label>
<input type="email" id="email" name="email" data-theme="d" placeholder="Enter Email"/>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div class="ui-grid-a">
<div class="ui-block-a">
<div class="ui-bar ui-bar-a">
<input type="button" data-icon="delete" value="Cancel" id="cancel"/>
</div>
</div>
<div class="ui-block-b">
<div class="ui-bar ui-bar-a">
<input type="submit" data-icon="check" value="Submit" id="submit"/>
</div>
</div>
</div>
</div>
</form>
</div>
<div data-role="page" id="success" data-theme="b">
<div data-role="header">
<h2>Thank You !!!</h2>
</div>
</div>
JavaScript：
JavaScript:
$('#form1').validate({
rules: {
fname: {
required: true
},
lname: {
required: true
},
email: {
required: true
}
},
messages: {
fname: {
required: "Please enter your first name."
},
lname: {
required: "Please enter your last name."
},
lname: {
required: "Please enter your email."
}
},
errorPlacement: function (error, element) {
error.appendTo(element.parent().prev());
},
submitHandler: function (form) {
$(':mobile-pagecontainer').pagecontainer('change', '#success', {
reload: false
});
return false;
}
});
CSS：
CSS:
.error {
color:red;
}
如果您想了解有关此主题的更多信息，请查看 < a href =http://www.gajotres.net/using-validation-plugin-with-jquery-mobile-1-4/>这里 。
If you want to find more about this topic take a look here.
这篇关于JQuery mobile：如何验证表单并在页面上显示错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
