jQuery.validate.js e páginas mestras do ASP.NET

Question

Eu tenho jQuery em vários arquivos, e recentemente eu precisava mudar itens na página mestra. Este vários jaavscript causou inclui a parar de trabalhar. Stackoverflow são sugerindo grandes idéias para resolver a questão da get pelo selector ID.

$("#ctl00_ContentMainPane_eliteUser").html

No entanto eu tenho um problema onde usamos jquery.validate.js para controles de formulário de validação, para que haja um código como este em externo JS arquivos

$(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.");
});

Qualquer ideia de como evitar o problema nameing de atributos se o nome acontece a mudança devido à página mestra sendo alterada?

Answer 1

Wait for .NET 4.0, que permite que você especifique exatamente como os de identificação deve ser construído;)

A sério: você pode AFAIK criar suas regras manualmente, fazendo algo como (um objeto JS não é senão um "array" de propriedades):

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

Você já olhou para http://weblogs.asp.net/psperanza/archive/2009/05/07/jquery-selectors-selecting-elements-by-a-partial-id.aspx para resultados parciais em jQuery.
A única outra opção que eu posso ver é adicionar o conteúdo do arquivo js para a página e usar algo <% = txtFirstName.ClientID%>

Answer 3

A minha resposta é a minha modificação veggerby. Por favor upvote sua resposta, não a minha. Ele salvou o dia.

Estou colocando minha resposta aqui para adicionar uma pequena ressalva. (Eu estou fazendo o attr' Usando ( 'nome')). E para mostrar como fazê-lo com uma lista suspensa.

Não vi é que a minha página de conteúdo tem um dropdownlist asp.net chamado "ddlState" e "ddlFavoriteColor". Eu coloquei um manequim "--Selecione--" valor no topo da lista suspensa itens da lista, então eu quero algo onde o selectedIndex é maior do que zero.

Note, este projecto é "preso" com 3.5. :.

Sim, o meu código "verificação" poderia ser menor, mas para amostras web, eu gostaria de ser um pouco detalhado sobre conciso para mostrar o que está acontecendo.

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
    });