CODEWITHSUNDEEP
jquery-mobilejquery-validate
Rajeev Nair
Rajeev Nair

Reputation: 759

jQuery Validation not displaying messages

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%; }
}

Upvotes: 1

Views: 6009

Answers (1)

ptrc
ptrc

Reputation: 880

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");

Upvotes: 11

Related Questions