jQuery Validation not displaying messages - jquery-mobile

Question

I am using jQuery Validation plugin, for my jQuery mobile site. The validation is hitting, but it is not displaying the error messages. Need help in figuring out what is wrong. Here is my code.
<script language="javascript" type="text/javascript" >
$(document).ready(function () {
$("#LoginForm").validate();
});
</script>
<form id="LoginForm" class="validate" action="~/Home/Search" method="get">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider"><div class="center-wrapper">Secure Login</div></li>
<li data-role="fieldcontain">
<label for="FirmKey">FirmKey</label>
<input type="text" id="FirmKey" name="FirmKey" class="required" />
</li>
<li data-role="fieldcontain">
<label for="UserName">User Name</label>
<input type="text" id="UserName" name="UserName" class="required" />
</li>
<li data-role="fieldcontain">
<label for="Password">Password</label>
<input type="password" id="Password" name="Password" class="required" />
</li>
<li data-role="fieldcontain">
<input type="submit" id="submit" value="LOGIN" />
</li>
</ul>
</form>
CSS:
label.error {
float: none;
color: red;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
margin-top: 0.5em;
width: 100%;
display: block;
margin-left: 22%;
}
#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%; }
}

Answer 1

If you happen to be including the jquery.validation.unobtrusive script, it will .validate() your form before you get a chance to. You need to remove the automatically added validation object from you form before you can call .validate() manually for it to function properly... something along the lines of
$("#theForm").removeData("validator")
$("#theForm").removeData("unobtrusiveValidation");