Rob Bihun

JQuery Validation with ASP.NET MasterPages

19. May 2009

I love using the jquery validation plugin in my .NET projects; however, there are some things to keep in mind when using it – especially when used in conjunction with master pages.

What is that field ID?

We all know that master pages and content pages generate specific IDs for the form elements to ensure a truly unique ID Value. When using jQuery validate, you may be tempted to call the fields client id value from .NET as shown below.

$("#aspnetForm").validate({
	rules: {
		<%=txtName.ClientID%>: {
			required: true
		}
	}
	messages: {
		<%=txtName.ClientID%>: "Please enter your name."
	}
});

Trying to run this example will not work, that is because the validate plugin uses the "name” field of form elements to run it’s validation. Rewriting the javascript to use UniqueID instead would work.

$("#aspnetForm").validate({
	rules: {
		<%=txtName.UniqueID%>: {
			required: true
		}
	}
	messages: {
		<%=txtName.UniqueID%>: "Please enter your name."
	}
});

ASP.NET, jQuery, General asp.net, jquery, tips

My favorite JQuery Plugins to use with ASP.NETIf you ran across this, you are probably familiar with JQuery and are more than likely a Micro...ASP.NET and JQuery Comment Submission FormThis post (long overdue) is to build off of my last one. I will show you a very simple, high level o...An Introduction to jQuery and .NET Web ServicesSince I finally have a few minutes to write a blog post, I'm going to post on something I've been pl...

Comments

Voguishchic

7/31/2009 4:11:34 AM #

Great post! Keep up the good work!

cristian

8/24/2009 10:20:25 AM #

Hi I have a problem that i can´t find the solution.

i have 1 txtbox, 1 dropdownlist and 1 select box. The dropdownlist load the select box. below some code to show how i'm validatiing the form

*************************
Script: (validate declaration)
*************************
rules:
{
    cname:
    {
        required:true
        },
        ddlCities:
        {
        required: function (element){
            return $("#ddlCities").val() < 1;
            }
        }
    },

    messages:
    {
        cname:
        {
            required: "<img src='img/cancel.png' with='20' height='20' title='Ingrese el nombre de su empresa'>"
        },
        ddlCities:
        {
            required: "<img src='img/cancel.png' with='20' height='20' title='Elija un Rubro'>"
        }
    }
******
HTML:

******
<form name="submitform" id="submitform" method="post" action="test.aspx" runat="server">

<input id="cname" name="cname">

<asp:DropDownList ID="ddlStates" runat="server">
            <asp:ListItem Value="none">Select</asp:ListItem>
            <asp:ListItem Value="1">Santa Fè</asp:ListItem>
            <asp:ListItem Value="2">Buenos Aires</asp:ListItem>
        </asp:DropDownList>

        <select ID="ddlCities" runat="server">
            </select>

this code is ok. when the select (ddlCities) don't have an option selected the validate library show the message asking choose one value of the list.

The problem is when i use this code inside of MasterPage, more exactly inside of ContentPlaceHolder. Cry

The text box validtion is ok, but the combo don't work.

I modified the code Script like:-->

*************************
Script: (validate declaration)
*************************
rules:
{
    cname:
    {
        required:true
        },
        <%=ddlCities.ClientID%>:
        {
        required: function (element){
            return $("#ddlCities").val() < 1;
            }
        }
    },

    messages:
    {
        cname:
        {
            required: "<img src='img/cancel.png' with='20' height='20' title='Ingrese el nombre de su empresa'>"
        },
        <%=ddlCities.ClientID%>:
        {
            required: "<img src='img/cancel.png' with='20' height='20' title='Elija un Rubro'>"
        }
    }

theorically, it should work, but it is not true.....

can you help me with this issue?

thanks in advance

Cristian