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

Question

J'aimerais vraiment utiliser le plug-in de validation jQuery dans mon application ASP.NET Web Forms (et non 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.

Je ne fais que rencontrer quelques problèmes lors du paramétrage de la classe comme suit: class = " email requis " ce qui, je pense, 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 la requête jQuery. Validez à l'aide des 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>

parce que cela

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

s'affiche sous la forme

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

et mutile le nom. Je peux obtenir le ClientID avec <%=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 séparés?

Answer 1

Vous pouvez vérifier la fonction d'ajout de règles , mais voici en gros 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 identificateurs de merde générés par le moteur de formulaires Web.

Answer 2

Voici des exemples d'utilisation de jQuery. Plug-in de validation avec WebForms et émuler le concept de groupes de validation avec celui-ci. En fait, cela fonctionne plutôt bien une fois que vous avez réglé quelques problèmes.

Answer 3

$("#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 4

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

Answer 5

Testé ce que Darin Dimitrov a dit 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" />

Answer 6

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"
    }, 
}.

Answer 7

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

Vous pouvez en savoir plus à ce sujet ici: http://cmendible.blogspot.com/

Answer 8

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

<% = textbox.Name% > ou <% = textbox.ClientId% > chaque fois que vous avez besoin de 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"
                }, 
        }.

.......

Answer 9

Pour SharePoint 2010 , lors du chargement de différents contrôles utilisateur en tant que vues (via ajax), cela fonctionnait si vous déplaciez le javascript dans une bibliothèque et ne parveniez pas à utiliser les balises de serveur comme identifiant de contrôle:

p.ex. #<%= 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 si, sur la page Contrôle utilisateur sur (événement côté serveur), chargez son fin, mais dans le scénario 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, même s’il est peut-être un peu plus rapide ou non.

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. Il chargeait en réalité plus rapidement, ou beaucoup plus de données, plus rapidement ou plus rapidement.

Answer 10

Je recommande l'utilisation de 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 consulter 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 dans cet article ont été dirigées 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" .../>