Plugin jQuery Validation dans ASP.NET Web Forms

Question

Je voudrais vraiment utiliser le plugin jQuery Validation dans mon application ASP.NET Web Forms (pas MVC). Je trouve cela plus facile que d'ajouter des validateurs d'asp partout et de régler le contrôle pour valider le champ sur chacun d'eux. Je rencontre juste quelques problèmes à la fois lors de la définition de la classe comme this class = "email requis" qui, je pense, a quelque chose à voir avec avoir une étiquette de formulaire dans la balise de formulaire principal.

Je lance aussi dans des problèmes lors de l'appel de la validation jquery en utilisant les noms qui deviennent mutilée dans un contrôle asp

// validate signup form on keyup and submit 
$("#signupForm").validate({ 
    rules: { 
     username: { 
      required: true, 
      minlength: 2 
     }, }, 
    messages: { 
     username: { 
      required: "Please enter a username", 
      minlength: "username at least 2 characters" 
     }, 
    }. 

....... 

     <p> 
      <label for="username"> 
       Username</label> 
      <input id="username" name="username" /> 
     </p> 

parce que ce

<asp:TextBox ID="tbUsername" runat="server"></asp:TextBox> 

rend comme

<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" /> 

et mangles le nom. Je peux obtenir le ClientID en utilisant <%=tbUsername.ClientID %> mais cela ne fonctionne pas avec ClientName

Quelqu'un a-t-il réussi à utiliser le plugin jquery validator avec asp.net? Si oui, qu'en est-il de l'utilisation de formulaires multiples comme si vous utilisiez des groupes de validation séparés?

Answer 1

Vous pouvez extraira le rules add function, mais fondamentalement voici ce que vous pouvez faire:

jQuery(function() { 
    // You can specify some validation options here but not rules and messages 
    jQuery('form').validate(); 
    // Add a custom class to your name mangled input and add rules like this 
    jQuery('.username').rules('add', { 
     required: true, 
     messages: { 
      required: 'Some custom message for the username required field' 
     } 
    }); 
}); 

<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" class="username" /> 

De cette façon, pas besoin de se soucier des identifiants merdiques générés par le moteur WebForms.

Answer 2

Vous pouvez vérifier xVal.webForms ici: http://xvalwebforms.codeplex.com/

Answer 3

J'ai récemment posté un fichier de patch pour xVal.WebForms qui résout les multiples formes de relais sur la question du groupe de validation ASP.Net bien connu. Ce correctif prend également en charge la propriété ASP.Net CausesValidation.

Yo peut lire à ce sujet ici: http://cmendible.blogspot.com/

Answer 4

Voici des exemples de using the jQuery Validation plugin with WebForms et emulating the concept of validation groups avec elle. Cela fonctionne plutôt bien une fois que vous avez réglé quelques problèmes.

Answer 5

testé ce que Darin Dimitrov a dit et cela fonctionne parfaitement, mais si vous ne voulez pas définir une classe spécifique à chacun de vos champs, vous pouvez utiliser des sélecteurs jQuery:

$('form').validate(); 
$('input[id$=Username]').rules('add', { 
    required: true, 
    messages: { 
     required: 'Some custom message for the username required field' 
    } 
}); 

<input name="ctl00$ContentPlaceHolder1$tbUsername" type="text" id="ctl00_ContentPlaceHolder1_tbUsername" /> 

Answer 6

Une excellente façon de faire est d'utiliser:

<% = textbox.Name%> ou <% = textbox.ClientId%> chaque fois que vous devez faire référence à un élément de serveur.

à-dire

var phoneNumb = $('#<%= tPhone.ClientID %>').val(); 

ou

$("#signupForm").validate({ 
     rules: { 
       <%= username.Name %>: { 
         required: true, 
         minlength: 2 
       }, }, 
     messages: { 
       <%= username.Name %>: { 
         required: "Please enter a username", 
         minlength: "username at least 2 characters" 
       }, 
     }. 

.......

Answer 7

$("#signupForm").validate({ 
     rules: { 
       <%= tbUsername.UniqueID %>: { 
         required: true, 
         minlength: 2 
       }, }, 
     messages: { 
       <%= tbUsername.UniqueID %>: { 
         required: "Please enter a username", 
         minlength: "username at least 2 characters" 
       }, 
     }); 

<asp:TextBox ID="tbUsername" runat="server"></asp:TextBox> 

Answer 8

Pour SharePoint 2010 J'ai trouvé avec le chargement des différents usercontrols que des vues (via ajax) que cela a fonctionné si vous déplacez javascript dans une bibliothèque et ne peut pas utiliser des balises de serveur pour l'ID de contrôle est comme ceci:

par exemple #<%= tPhone.ClientID %>

$('input[id$=tPhone]').rules('add', 
{  
required: true,  
messages: 
{   
    required: 'Some custom message for the username required field'  
} 
}); 

Suite à cela si vous chargez dynamiquement un contrôle utilisateur via Ajax, alors vous ne pouvez pas utiliser $ (document) .ready vous devrez résumer la jQuery dans une bibliothèque de fonctions si son sur la page User Control at (événement côté serveur) charge son bien mais dans le scénario son chargé via Ajax avec le panneau de mise à jour il ne dansera pas.

Je n'ai pas encore essayé de charger les contrôles usuels via jQuery, cela semble lourd et semble charger la page entière mais peut-être un peu plus vite ou pas. Des tests comparant les techniques de chargement ont montré que le panneau de mise à jour était aussi rapide et donnait des tailles de page identiques ou inférieures à celles des autres techniques et qu'il chargeait plus rapidement ou plus rapidement des données plus rapides ou plus rapides.

Answer 9

La meilleure solution est d'utiliser "<% = tbUsername.UniqueID%>" au lieu de tbUsername dans les règles jQuery.

$("#signupForm").validate({ 
rules: { 
    "<%=tbUsername.UniqueID %>": { 
     required: true, 
     minlength: 2 
    }, }, 
messages: { 
    "<%=tbUsername.UniqueID %>": { 
     required: "Please enter a username", 
     minlength: "username at least 2 characters" 
    }, 
}. 

Answer 10

Je recommande d'utiliser jQuery.simple.validator, il est facile, lightweigh et personnalisable validateur compatibles avec les formulaires web asp.net, parce que fondamentalement, il peut effectuer dans un conteneur de validation, non seulement

https://github.com/v2msoft/jquery.simple.validator

Je vous recommande de vérifier le plugin et la documentation. Utilisation:

<script type="text/javascript" src="/Content/js/jquery-plugins/jquery.simple.validator.js"></script> 

<div id="container"> 
    <!-- REQUIRED FIELD --> 
    <label>Required Field: </label><br/> 
    <input type="text" id="required_field_control" data-required data-required-msg="Field is required" /><br /><br/> 

    <input type="button" value="Validate" onclick='javascript:validate();' /> 
</div> 


<script type="text/javascript"> 
    function validate() { 
     $("#container").initialize(); 
     var ok = $("#container").validate(); 
     if (!ok) alert("There are errors"); 
     else alert("Form is ok"); 
    } 
</script 

Answer 11

Les informations in this article m'a amené à utiliser Control.ClientID lorsque vous cherchez un match avec jQuery ... des informations très utiles ...

<label for="<%= tbName.ClientID %>">Name</label> 
<input id="cphBody_tbName" runat="server" .../>