Plugin di convalida jQuery in Web Form ASP.NET

Question

Vorrei davvero usare il plug-in di convalida jQuery nella mia applicazione ASP.NET Web Forms (non MVC). Trovo più facile che aggiungere validatori asp ovunque e impostare il controllo per validare il campo su tutti loro.

Sto solo riscontrando alcuni problemi sia durante l'impostazione della classe come questa class = " email richiesta " che penso abbia a che fare con l'avere un tag form all'interno del tag form principale.

Riscontro anche problemi quando si chiama validazione jquery usando i nomi che diventano alterati in un controllo 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>

perché questo

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

viene visualizzato come

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

e modifica il nome. Posso ottenere ClientID usando <%=tbUsername.ClientID %> ma non funziona con ClientName

Qualcuno ha avuto successo usando il plugin validator jquery con asp.net? In caso affermativo, che dire dell'utilizzo di più moduli, proprio come l'utilizzo di gruppi di convalida separati?

Answer 1

Puoi controllare le aggiungere funzioni , ma in pratica ecco cosa puoi fare:

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" />

In questo modo non è necessario preoccuparsi degli identificatori scadenti generati dal motore dei moduli web.

Answer 2

Ecco alcuni esempi di utilizzando jQuery Plug-in di convalida con WebForms e emulare il concetto di gruppi di validazione con esso. In realtà funziona abbastanza bene una volta risolti un paio di problemi.

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

Puoi controllare xVal.webForms qui: http://xvalwebforms.codeplex.com/

Answer 5

Testato ciò che ha detto Darin Dimitrov e funziona perfettamente, ma se non vuoi impostare una classe specifica per ciascuno dei tuoi campi, puoi usare i selettori 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 soluzione migliore è utilizzare " <% = tbUsername.UniqueID% > " anziché tbUsername nelle regole 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

Di recente ho pubblicato un file di patch per xVal.WebForms che risolve il problema di inoltro di moduli multipli sul noto gruppo di validazione ASP.Net. Questa patch supporta anche la proprietà ASP.Net CauseValidation.

Puoi leggerlo qui: http://cmendible.blogspot.com/

Answer 8

Un ottimo modo per farlo è usare:

<% = textbox.Name% > o <% = textbox.ClientId% > ogni volta che devi fare riferimento a un elemento del server.

cioè.

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

o

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

Per SharePoint 2010 ho scoperto con il caricamento di diversi controlli utente come viste (tramite ajax) che ciò ha funzionato se si sposta JavaScript in una libreria e non è possibile utilizzare i tag del server per l'ID di controllo in questo modo:

ad esempio #<%= tPhone.ClientID %>

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

Inoltre, se si carica dinamicamente un controllo utente tramite Ajax, non è possibile utilizzare $ (documento) Dovrai incapsulare jQuery in una libreria di funzioni se si trova nella pagina Controllo utente alla pagina (evento lato server), ma nello scenario viene caricato tramite Ajax con il pannello di aggiornamento, non ballerà.

Non ho ancora provato a caricare i controlli utente tramite jQuery, questo sembra pesante e sembra caricare l'intera pagina anche se forse leggermente più veloce o meno.

I test che hanno confrontato le tecniche di caricamento hanno mostrato che il pannello di aggiornamento è stato altrettanto veloce e ha prodotto pagine di dimensioni uguali o inferiori rispetto ad altre tecniche e ha sostanzialmente caricato dati sempre più veloci o molto più rapidi.

Answer 10

Consiglio di usare jQuery.simple.validator, il suo validatore facile, leggero e personalizzabile compatibile con i moduli web asp.net, perché in pratica può eseguire validazioni in qualsiasi contenitore, non solo

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

Ti consiglio di controllare il plugin e la documentazione. Uso:

<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

Le informazioni in questo articolo hanno portato per usare Control.ClientID quando cerco una corrispondenza con jQuery ... Informazioni molto utili ...

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