It's not working at all and I'm not sure why. Ideally I'd like to have all the errors pop up in a modal dialog box. But right now I can't even get it to work normally. Any help would be appreciated. Thanks.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.
js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.
js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.
js" type="text/javascript"></script>
<script src="../Scripts/Frame.
js" type="text/javascript"></script>
</head>
<body runat="server" id="bodyLogin">
<div runat="server" id="frameLogin">
<form runat="server" id="formLogin">
<asp:CheckBox runat="server" ID="checkboxRemember" />
<div><span id="un">Username</span><div id="forgotUsername">?</div><br />
<asp:TextBox runat="server" ID="textUsername" Name="username" /></div>
<div><span id="pw">Password</span><div id="forgotPassword">?</div><br />
<asp:TextBox runat="server" ID="textPassword" Name="password" TextMode="Password" /></div>
<asp:Button runat="server" ID="buttonLogin" Text="L" />
<asp:Button runat="server" ID="buttonRegister" Text="R" />
</form>
</div>
<div id="dialog" title="Errors" style="display:none;"><ul></ul></div>
</body>
</html>
JQuery
<script type="text/javascript">
$(function () {
$("#formLogin").validate({
rules: {
username: {
required:true,
minlength:3,
maxlength:15
},
password: {
required:true,
minlength:6,
maxlength:15
},
},
messages: {
username: {
required: "Username
is required.",
minlength: "Username minimum length
is 3 characters.",
maxlength: "Username maxumum length
is 15 characters."
},
password: {
required: "Password
is required.",
minlength: "Password minumum length
is 6 characters.",
maxlength: "Password maximum length
is 15 characters."
}
}
});
});
</script>
