jQuery.validate.js et les pages maîtres asp.net

Question

J'ai jQuery dans divers fichiers, et récemment j'ai eu besoin de changer des éléments dans la page maître. Cela a causé divers jaavscript inclus pour cesser de fonctionner. Stackoverflow sont suggesting great ideas pour résoudre le problème concernant le sélecteur Get by ID.

$("#ctl00_ContentMainPane_eliteUser").html 

Cependant, j'ai un problème où nous avons utilisé jquery.validate.js pour valider les contrôles de formulaire, donc il y a un code comme celui-ci dans externes fichiers JS

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

Toute idée comment prévenir le problème de nom des attributs si le nom est modifié en raison de la modification de la page maître?

Answer 1

Attendez .NET 4.0, qui vous permet de spécifier exactement comment les ID doivent être construits;)

Sérieusement: vous pouvez AFAIK créer vos règles manuellement, faire quelque chose comme (un objet JS est rien d'autre qu'un " tableau » des 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 en jQuery.
La seule autre option que je peux voir est d'ajouter le contenu du fichier js à la page et utiliser quelque chose <% = txtFirstName.ClientID%>

Answer 3

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

Je mets ma réponse ici pour ajouter une légère mise en garde. (Je fais le Using 'attr ("nom")). Et de montrer comment le faire avec une liste déroulante. Je n'ai pas vu que ma page de contenu a une liste déroulante asp.net appelée "ddlState" et "ddlFavoriteColor". J'ai mis une valeur "--Select--" factice dans le 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 "coincé" avec 3.5. : < J'aurais plutôt fait quelque chose avec les fonctionnalités cool 4.0.

Oui, mon code "check" pourrait être plus petit, mais pour les échantillons web, j'aime être un peu plus verbeux que concis 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 
    });