JQuery in ASP.NET - Form Validation Issue

Question

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>

EDIT: I tried both...

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Frame_Login.aspx.cs" Inherits="Website.Frames.Frame_Login" ClientIDMode="Static" %>

and...

    $("#<%= formLogin.ClientID %>").validate({

IUnknown · Accepted Answer · 2011-11-29 19:36:46Z

1

Remove Name property from TextBox controls. All the way your value will be overrided with autogenerated one. And use script below:

$(function () {
    $("#<%= formLogin.ClientID %>").validate({
        rules: {
            '<%= textUsername.ClientID %>': {
                required: true,
                minlength: 3,
                maxlength: 15
            },

            '<%= textPassword.ClientID %>': {
                required: true,
                minlength: 6,
                maxlength: 15
            }
        },

        messages: {
            '<%= textUsername.ClientID %>': {
                required: "Username is required.",
                minlength: "Username minimum length is 3 characters.",
                maxlength: "Username maxumum length is 15 characters."
            },

            '<%= textPassword.ClientID %>': {
                required: "Password is required.",
                minlength: "Password minumum length is 6 characters.",
                maxlength: "Password maximum length is 15 characters."
            }
        }
    });
});

answered Nov 29, 2011 at 19:36

IUnknown

22.5k4 gold badges41 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ber53rker Over a year ago

Worked splendidly! Thank you!

Daniel A. White · Accepted Answer · 2011-11-29 17:34:55Z

0

You have to set the ClientIDMode to Static if using .NET 4, other wise get the ClientID and stick that in the javascript.

answered Nov 29, 2011 at 17:34

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

1 Comment

Ber53rker Over a year ago

Unfortunately, this didn't seem to help.

Becuzz · Accepted Answer · 2011-11-29 17:36:27Z

0

Since your form has runat="server", you need to use the asp client id in your jQuery.

Like this:

$("#<%= formLogin.ClientID %>").validate({
//etc

answered Nov 29, 2011 at 17:36

Becuzz

6,86728 silver badges39 bronze badges

1 Comment

Ber53rker Over a year ago

Unfortunately, this didn't seem to help either.

Collectives™ on Stack Overflow

JQuery in ASP.NET - Form Validation Issue

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related