Plugin de validation jQuery dans les formulaires Web ASP.NET

Question

J'aimerais 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 définir le contrôle pour valider le champ sur tous ces validateurs.

J'ai juste quelques problèmes lorsque je définis la classe comme ceci class="required email" 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 lorsque j'appelle la validation jquery en utilisant les noms qui sont mélangé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 cette

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

est rendu par

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

et écorche 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 c'est le cas, qu'en est-il de l'utilisation de formulaires multiples, tout comme l'utilisation de groupes de validation séparés ?

Answer 1

Vous pouvez consulter le les règles ajoutent une fonction mais en gros, 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, il n'y a pas lieu de s'inquiéter des identifiants de mauvaise qualité générés par le moteur de webforms.

Answer 2

Voici des exemples de utiliser le plugin jQuery Validation avec WebForms y émuler le concept des groupes de validation avec elle. En fait, ça marche plutôt bien une fois que vous avez résolu 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 consulter xVal.webForms ici : http://xvalwebforms.codeplex.com/

Answer 5

J'ai testé ce que Darin Dimitrov a dit et cela fonctionne parfaitement, mais si vous ne voulez 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" />