páginas maestras jQuery.validate.js y asp.net

Question

Tengo jQuery en varios archivos, y recientemente he necesitado cambiar elementos en la página maestra. Esto ha provocado que varios jaavscript incluyan dejar de funcionar. Stackoverflow sugiere ideas geniales para resolver el problema relacionado con el selector de obtención de ID.

$("#ctl00_ContentMainPane_eliteUser").html

Sin embargo, tengo un problema en el que hemos usado jquery.validate.js para validar controles de formulario, por lo que hay un código como este en los archivos JS externos

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

¿Alguna idea de cómo evitar el problema de nombre de los atributos si el nombre cambia debido a la modificación de la página maestra?

Answer 1

Espere .NET 4.0, que le permite especificar exactamente cómo se deben construir los ID;)

En serio: puedes AFAIK crear tus reglas manualmente, haciendo algo como (un objeto JS no es más que un " array " de propiedades):

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

¿Has mirado http://weblogs.asp.net/psperanza/archive/2009/05/07/jquery-selectors-selecting-elements-by-a-partial-id.aspx para coincidencias parciales en jQuery.
La única otra opción que puedo ver es agregar el contenido del archivo js a la página y usar algo & Lt;% = txtFirstName.ClientID% & Gt;

Answer 3

Mi respuesta es mi modificación de veggerby. Vota por favor su respuesta, no la mía. Él salvó el día.

Pongo mi respuesta aquí para agregar una pequeña advertencia. (Estoy haciendo el uso de 'attr (& Quot; name & Quot;)). Y para mostrar cómo hacerlo con una lista desplegable.

No se ve es que mi página de contenido tiene una lista desplegable asp.net llamada " ddlState " y & "; ddlFavoriteColor &"; Puse un maniquí & Quot; - Seleccione - & Quot; valor en la parte superior de los elementos de la lista desplegable, por lo que quiero algo donde el índice seleccionado sea mayor que cero.

Nota, este proyecto es " pegado " con 3.5. : < Hubiera preferido hacer algo con las fantásticas características 4.0.

Sí, mi " verifique " el código podría ser más pequeño, pero para las muestras web, me gusta ser un poco detallado sobre conciso para mostrar lo que está sucediendo.

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