jQuery plugin Convalida ASP.NET Web Form

Vorrei utilizzare la Convalida jQuery plugin nel mio ASP.NET applicazione Web Form (non MVC). Trovo più semplice di aggiungere asp validatori ovunque e impostando il controllo di convalida campo su tutti loro.

Io sto avendo alcuni problemi, sia quando si imposta la classe class=”email” che credo abbia qualcosa a che fare con una forma di tag principale tag form.

Anche io ho dei problemi quando si chiama jquery validate utilizzando i nomi alterati in un asp di controllo

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

rende come

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

e manipola il nome. Posso ottenere il ClientID utilizzando <%=tbUsername.ClientID %>ma che non funziona con ClientName

Qualcuno ha avuto successo utilizzando jquery plugin con il validatore asp.net?
Se è così che cosa circa l’utilizzo di più moduli di molto simile all’utilizzo di separare i gruppi di validazione?

InformationsquelleAutor eiu165 | 2009-03-06

 

11 Replies
  1. 46

    Si può scaricare il regole di aggiungere la funzione di, ma in fondo qui è che cosa si può 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 c’è bisogno di preoccuparsi per il pessimo identificatori generato dal webforms motore.

  2. 11

    Qui ci sono esempi di utilizzando jQuery Validation plugin con WebForms e emulando il concetto di gruppi di validazione con esso. In realtà funziona abbastanza bene, una volta che si liscia un paio di problemi.

    • Il link si dà contiene informazioni cruciali. Per esempio, la prevenzione jQuery convalida di essere chiamato a ogni invio del form, è necessario quando si dispone di più di un modulo per ogni pagina.
    • In webforms c’è solo 1 modulo per ogni pagina.
  3. 11
    $("#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>
    • UniqueID risolto il mio problema, grazie! Sto utilizzando ASP.NET 4 con Webforms.
    • È inoltre possibile utilizzare clientidmode poi. impostarlo statico nella direttiva di pagina o per il controllo ClientIDMode="Static" e vedere che come $('#tbUsername')
    • Grazie uomo. Appena mi ha aiutato a dare un senso a 8 ore di lavoro…Apprezzare!
  4. 4

    Si può controllare xVal.webForms qui: http://xvalwebforms.codeplex.com/

    • Questo è un fantastico plugin per l’integrazione di jQuery validation con ASP.NET. Rende la vita facile con il supporto di gruppi di validazione, sommario di convalida & possibilità di disattivare la validazione lato client(se richiesto).
  5. 2

    Testato il quale Darin Dimitrov ha detto e funziona perfettamente, ma se non si desidera impostare una classe specifica per ciascuno dei tuoi campi, è possibile utilizzare 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" />
  6. 2

    La soluzione migliore è usare “<%=tbUsername.UniqueID %>” invece di tbUsername in jQuery regole.

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

    Recentemente ho inviato un file di patch per xVal.WebForms che consente di risolvere le molteplici forme questione di stabulazione sul ben noto ASP.Net Gruppo di convalida. Questa patch supporta anche il ASP.Net proprietà CausesValidation.

    Yo può leggere su di esso qui: http://cmendible.blogspot.com/

  8. 0

    Un ottimo modo per farlo è quello di utilizzare:

    <%= textbox.Nome %> o <%= textbox.ClientId %> ogni volta che avete bisogno di 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"
                    }, 
            }.

    …….

  9. 0

    Per SharePoint 2010 ho trovato con il caricamento dei diversi controlli utente come vista (via ajax) che questo ha funzionato, se si sposta javascript in una libreria e non è possibile utilizzare il server di tag per l’id di controllo come questo:

    e.g #<%= tPhone.ClientID %>

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

    Ulteriormente a questo, se si caricare dinamicamente un controllo utente tramite Ajax quindi non è possibile utilizzare $(document).pronto
    Sarà necessario incapsulare jQuery in una funzione di libreria se la sua sul Controllo Utente a (evento lato server) di caricamento della pagina e la sua raffinata ma nello scenario sua caricato tramite Ajax con il Pannello di Aggiornamento non danza.

    Non ho provato il caricamento di controlli utente tramite jQuery di sicurezza, questo sembra pesante e sembra caricare l’intera pagina, anche se in modo forse un po ‘ più veloce o meno.

    Test confrontando il caricamento tecniche hanno mostrato il Pannello di Aggiornamento è stato più veloce e ha portato lo stesso o di più piccole dimensioni di pagina rispetto ad altre tecniche e fondamentalmente caricato più velocemente o dati molto più veloce o più veloce.

  10. 0

    Mi consiglia di utilizzare jQuery.semplice.validatore, la sua facile, lightweigh e personalizzabile validatore compatibile con asp.net moduli web, perché in fondo è in grado di eseguire le convalide in qualsiasi contenitore, non solo

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

    Mi consiglia di controllare il plugin e la documentazione.
    Utilizzo:

    <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
    • La sua domanda era sull’utilizzo di convalidare con webforms.
  11. 0

    Le informazioni in questo articolo mi ha portato a utilizzare il Controllo.ClientID quando alla ricerca di una corrispondenza con jQuery… informazioni Molto utili…

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

Lascia un commento