web-dev-qa-db-fra.com

plug-in de validation jQuery dans les formulaires Web ASP.NET

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 asp partout et de configurer le contrôle pour valider le champ sur chacun d'entre eux. 

J'ai juste quelques problèmes à la fois lors du paramétrage de la classe comme ceci: class = "required email", ce qui a quelque chose à voir avec le fait d'avoir une balise de formulaire dans la balise de formulaire principale.

Je rencontre également des problèmes lors de l'appel de jquery, validez en utilisant les noms qui deviennent mutilés 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>

car ce 

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

rend comme 

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

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

Quelqu'un at-il déjà réussi à utiliser le plugin jquery validator avec asp.net? Si oui, qu’en est-il de l’utilisation de plusieurs formulaires, un peu comme l’utilisation de groupes de validation distincts?

asp.netjqueryvalidationwebformsjquery-validate
43
eiu165

Vous pouvez récupérer les règles add function , mais 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, vous n'avez pas à vous soucier des identifiants pourris générés par le moteur de formulaires Web.

46
Darin Dimitrov

Voici des exemples de utilisant le plugin jQuery Validation avec WebForms et émulant le concept de groupes de validation avec lui. En fait, cela fonctionne plutôt bien une fois que vous avez réglé quelques problèmes.

11
Dave Ward
$("#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>
11
1984kg

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

4
Carlos Mendible

La meilleure solution consiste à 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"
    }, 
}.
2
Jackie

Testé par Darin Dimitrov et que cela fonctionne parfaitement, mais si vous ne souhaitez pas définir une classe spécifique pour chacun de vos champs, vous pouvez utiliser les 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" />
2
C.Hoffmann

Les informations dans cet article m'ont amené à utiliser Control.ClientID lors de la recherche d'une correspondance avec jQuery ... Informations très utiles ...

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

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

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

c'est à 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"
                }, 
        }.

.......

0
Adam

J'ai récemment posté un fichier de correctif pour xVal.WebForms, qui résout le problème des formulaires multiples en relayant le célèbre groupe de validation ASP.Net. Ce correctif prend également en charge la propriété ASP.Net CausesValidation.

Vous pouvez lire à ce sujet ici: http://cmendible.blogspot.com/

0
Carlos Mendible

Pour SharePoint 2010 J'ai constaté lors du chargement de différents contrôles utilisateur en tant que vues (via ajax) que cela fonctionnait si vous déplaciez le javascript dans une bibliothèque et ne pouviez pas utiliser les balises de serveur pour l'ID de contrôle comme ceci:

par exemple #<%= tPhone.ClientID %>

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

De plus, si vous chargez dynamiquement un contrôle utilisateur via Ajax, vous ne pouvez pas utiliser $ (document) .ready Vous devrez encapsuler le jQuery dans une bibliothèque de fonctions s'il se trouve sur la page de contrôle utilisateur à (événement côté serveur). son amende 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 usercontrols via jQuery, cela semble lourd et semble charger toute la page, 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 une taille de page identique ou inférieure à celle des autres techniques et, en gros, chargeait des données beaucoup plus rapidement ou beaucoup plus rapidement.

0
jason robertson

Je recommande d'utiliser jQuery.simple.validator, son validateur simple, léger et personnalisable compatible avec les formulaires Web asp.net, car il permet en principe d'effectuer des validations dans n'importe quel conteneur, pas seulement. 

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

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

<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
0
Christian