$(document).on("pagecreate", "#page-one", function() {
$("#pwd").parent().addClass("error");
$("#pwd-confirm").parent().addClass("error");
$('.pwd').bind('input', function() {
var pwd = $("#pwd").val(), confirm = $("#pwd-confirm").val();
var empty = pwd == "";
var confirmed = !empty && pwd == confirm;
$("#pwd").parent().toggleClass("error", empty);
$("#pwd-confirm").parent().toggleClass("error", !confirmed);
});
});
.ui-input-text.error {
border-color: rgba(255,0,0,.8) !important;
-moz-box-shadow: inset 0 1px 3px rgba(255,0,0,.2) !important;
-webkit-box-shadow: inset 0 1px 3px rgba(255,0,0,.2) !important;
box-shadow: inset 0 1px 3px rgba(255,0,0,.2) !important;
}
.ui-input-text.ui-focus.error {
-webkit-box-shadow: 0 0 12px #F00 !important;
-moz-box-shadow: 0 0 12px #F00 !important;
box-shadow: 0 0 12px #F00 !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div role="main" class="ui-content">
<input id="pwd" type="text" class="pwd" placeholder="Enter Password">
<input id="pwd-confirm" type="text" class="pwd" placeholder="Confirm Password">
</div>
</div>
</body>
</html>
