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.
here is my 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>
Here is my JS file
$(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 bination");// 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;
});
});
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.
here is my 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>
Here is my JS file
$(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 bination");// 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;
});
});
1 Answer
Reset to default 7Simply bine jQuery validation plugin with jQuery Mobile.
Working example: http://jsfiddle/Gajotres/RLJHK/
HTML:
<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:
$('#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:
.error {
color:red;
}
If you want to find more about this topic take a look here.