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

See my answer here

Answer 4

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