JQM/Phoengap Rregister form validation:
=============================
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
<script src="js/jquery-2.1.3.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="logintheme1.css">
<!--<script src="jquery-mobile.js"></script>-->
<script src="js/jquery.validate.js"></script>
<style>
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>
<!-------------- First page for form ----------->
<div data-role="page" id="register">
<!-------------- First page header ----------->
<div data-role="header" data-position="fixed">
<h1>jQuery Mobile Registration Form</h1>
</div>
<!-------------- First page main content ----------->
<div data-role="main" class="ui-content">
<form method="post" action="#" data-ajax="false" id="registertheme1">
<div data-role="listview" data-inset="true" id="login_inset" class="login_inset">
<div class="ui-field-contain">
<label for="Username">Username : <span>*</span>
</label>
<input type="text" id="username" name="username" placeholder="Username">
</div>
<div class="ui-field-contain">
<label for="Username">Password: <span>*</span>
</label>
<input type="password" id="password" name="password" placeholder="Password" />
</div>
<div class="ui-field-contain">
<label for="Username">Re-Type: <span>*</span>
</label>
<input type="password" id="retype" name="retype" placeholder="Confirm Password" />
</div>
<div>
<input type="reset" data-icon="recycle" class="ui-btn ui-btn-inline error_color" data-inline="true" value="Reset" id="cancel">
<input type="submit" data-role="submit" data-icon="check" class="ui-btn ui-btn-inline success_color" data-inline="true" value="Register" id="submit">
</div>
</form>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h1> Form</h1>
</div>
<script>
$('#registertheme1').validate({
rules: {
username: {
required: true
},
password: {
required: true
},
retype: {
required: true,
equalTo:"#password"
}
},
messages: {
username: {
required: "Please enter your user name."
},
password: {
required: "Please enter your password."
},
retype: {
required: "Please enter confirm password.",
equalTo: "Please enter same password again "
}
},
errorPlacement: function (error, element) {
error.insertAfter(element.parent());
},
submitHandler: function (form) {
$(':mobile-pagecontainer').pagecontainer('change', '#success', {
reload: false
});
return false;
}
});
/* $("#register").on("pageinit", function () {
$("form").validate({
rules: {
username: {
required: true
},
password: {
required: true
},
retype: {
required: true
}
},
errorPlacement: function (error, element) {
error.insertAfter(element.parent());
}
});
});*/
</script>
<!-------------------------------------------------------------
End of First page
-------------------------------------------------------------->
<!-------------- Second page ----------->
<div data-role="page" id="pageone">
<!-------------- Second page header ----------->
<div data-role="header">
<h1>JQuery Mobile Form</h1>
</div>
<!-------------- Second page main content ----------->
<div data-role="main" class="ui-content">
<h2>Form Submitted Successfully...!!</h2>
</div>
</div>
<!-------------------------------------------------------------
End of Second page
-------------------------------------------------------------->
</body>
</html>
