jQuery.validate.js and asp.net master pages

Question

I have jQuery in various files, and recently I have needed to change items in the master page. This has caused various jaavscript includes to stop working. Stackoverflow are suggesting great ideas to solve the issue regarding the get by ID selector.

$("#ctl00_ContentMainPane_eliteUser").html

However I have a problem where we have used jquery.validate.js to validate form controls, so there is code like this in external JS files

$(document).ready(function(){ 
    $("#aspnetForm").validate({
        rules: 
    {
        ctl00$ContentMainPane$txtFirstName:
        {
            required:true,
            CheckAlfaNumeric:true
        },
        ctl00$ContentMainPane$ctl00$ucRFI$txtComments:
        {
            required:true
        }                       

    },
    messages:
    {
        ctl00$ContentMainPane$txtFirstName: 
        {
            required:" Please enter first name"
        },
        ctl00$ContentMainPane$ctl00$ucRFI$txtComments:
        {
            required:" Please enter comments."
        }
    }
    });
    $("#" + GetPlaceholder() + "txtFirstName").blur(function(){
            $("#" + GetPlaceholder() + "txtFirstName").valid();
    });
    jQuery.validator.addMethod("CheckAlfaNumeric", function(value, element) {
            return this.optional(element) || /^[A-Za-z\ ]+$/i.test(value);
    }, " Please enter alphabet.");
});

Any idea how to prevent the nameing issue of attributes if the name happens to change due to the master page being amended?

Answer 1

Wait for .NET 4.0, which allows you to specify exactly how the ID's should be constructed ;)

Seriously: you can AFAIK create your rules manually, doing something like (a JS object is nothing but an "array" of properties):

var myRules = new Object();
myRules[GetPlaceholder() + "txtFirstName"] = { required:true, CheckAlfaNumeric:true };

var myMessages = new Object();
myMessages[GetPlaceholder() + "txtFirstName"] = { required:"Please enter first name" };

$("#aspnetForm").validate({ rules: myRules, messages: myMessages });

Answer 2

Have you looked at http://weblogs.asp.net/psperanza/archive/2009/05/07/jquery-selectors-selecting-elements-by-a-partial-id.aspx for partial matches in jQuery.
The only other option I can see is to add the js file contents to the page and use something <%=txtFirstName.ClientID%>

Answer 3

My answer is my modification of veggerby. Please upvote his response, not mine. He saved the day.

I'm putting my response here to add a slight caveat. (I'm doing the Using 'attr("name")). And to show how to do it with a drop down list.

Not seen is that my content page has a asp.net dropdownlist called "ddlState" and "ddlFavoriteColor". I put a dummy "--Select--" value in the top of the drop down list items, so I want something where the selectedIndex is greater than zero.

Note, this project is "stuck" with 3.5. :< I would have rather done something with the cool 4.0 features.

Yes, my "check" code could be smaller, but for web samples, I like to be a tad verbose over concise to show what is going on.

function GetStateDropDownName() {
    var cntlName = $("[id$=_ddlState]").attr("name");
    return cntlName;
}

function GetFavoriteColorDropDownName() {
    var cntlName = $("[id$=_ddlFavoriteColor]").attr("name");
    return cntlName;
}

$(document).ready(function () {

    jQuery.validator.addMethod("dropdownBoxHasItemSelected", function (value, select, arg) {
        var returnValue = false;
        var selectedIndex = $(select).prop("selectedIndex");
        if (selectedIndex != 0) {
            returnValue = true;
        }
        return returnValue;
    }, "Please select a item.");


    var myRules = new Object();
    myRules[GetStateDropDownName()] = { dropdownBoxHasItemSelected: true };
    myRules[GetFavoriteColorDropDownName()] = { dropdownBoxHasItemSelected: true };

    var myMessages = new Object();
    myMessages[GetStateDropDownName()] = { dropdownBoxHasItemSelected: "Please select a State." };
    myMessages[GetFavoriteColorDropDownName()] = { dropdownBoxHasItemSelected: "Please select a Favorite Color." };


    // Initialize validation on the entire ASP.NET form.
    $("#aspnetForm").validate({
        rules: myRules, messages: myMessages
    });