Pages maîtres jQuery.validate.js et asp.net

Question

J'ai jQuery dans divers fichiers et j'ai récemment eu besoin de modifier des éléments de la page maître. Cela a amené divers jaavscript à cesser de fonctionner. Stackoverflow propose de bonnes idées pour résoudre le problème du sélecteur d'obtention d'ID.

$("#ctl00_ContentMainPane_eliteUser").html

Cependant, j'ai un problème d'utilisation de jquery.validate.js pour valider les contrôles de formulaire. Il existe donc un code similaire à celui-ci dans les fichiers JS externes

.

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

Avez-vous une idée de la façon d'éviter le problème de nommage des attributs si le nom change par la suite en raison de la modification de la page maître?

Answer 1

Attendez que .NET 4.0 vous permette de spécifier exactement comment l’ID doit être construit;)

Sérieusement: vous pouvez, autant que je sache, créer vos règles manuellement, en effectuant quelque chose comme (un objet JS n'est rien d'autre qu'un & "tableau &" de propriétés):

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

Avez-vous regardé http://weblogs.asp.net/psperanza/archive/2009/05/07/jquery-selectors-selecting-elements-by-a-partial-id.aspx pour les correspondances partielles dans jQuery.
La seule autre option que je puisse voir consiste à ajouter le contenu du fichier js à la page et à utiliser quelque chose & Lt;% = txtFirstName.ClientID% & Gt;

Answer 3

Ma réponse est ma modification de veggerby. S'il vous plaît upvote sa réponse, pas la mienne. Il a sauvé la journée.

Je mets ici ma réponse pour ajouter une légère mise en garde. (Je fais le Using 'attr (& Quot; nom & Quot;)). Et pour montrer comment le faire avec une liste déroulante.

Non visible, c'est que ma page de contenu comporte une liste déroulante asp.net appelée " ddlState " et & "; ddlFavoriteColor &"; Je mets un mannequin & Quot; - Sélectionnez - & Quot; valeur en haut des éléments de la liste déroulante, donc je veux quelque chose où le selectedIndex est supérieur à zéro.

Notez que ce projet est " bloqué " avec 3,5. : < J'aurais plutôt fait quelque chose avec les fonctionnalités 4.0 cool.

Oui, mon " vérifier " le code pourrait être plus petit, mais pour les exemples Web, j'aime être un peu bavard pour montrer ce qui se passe.

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