Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 12
  1. #1
    Utente di HTML.it L'avatar di Sonikag
    Registrato dal
    Mar 2004
    Messaggi
    2,080

    jquery validator per tutti i campi

    Ciao,
    solitamente le mie form le valido con jquery validation plugin. E se un campo deve essere numerico lo verifico in questo modo:

    codice:
    <script>                                
         $(document).ready(function() {
     
             $('#form').validate ({
                         rules: {
    
                          mioinput: {
                          digits: true
                          },
    }}
    Essendo che i miei campi sono però creati dinamicamente e non ne conosco il nome come posso fare per verificare che i campi inseriti nelle mie input siano TUTTI numerici?
    Grazie

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    783
    Non puoi usare dei nomi che conosci? Magari usa la stessa classe css per ogni input dello stesso tipo, così puoi recuperarli con jquery per tipologia e validarli come meglio preferisci.

    Avere degli input con nomi casuali ti porta più problemi che benefici secondo me, anche per il successivo recupero dei dati, ovviamente non so come funziona il tuo codice, quindi potresti anche avere delle ottime ragioni per utilizzarli, parlo solo in linea teorica.

  3. #3
    Utente di HTML.it L'avatar di Sonikag
    Registrato dal
    Mar 2004
    Messaggi
    2,080
    Grazie! I nomi vengono generati dinamicamente secondo una logica, essendo il risultato di una ricerca alle volte posso avere 4 input alle volte anche 80!
    Ovviamente assegnare a tutti la stessa classe mi è possibile e la soluzione fa al caso mio. Riesci a farmi un esempio? Non sono molto esperta di JS.
    Grazie

  4. #4
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,131
    Qui https://jqueryvalidation.org/digits-method/ non hai trovato spunti utili?
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  5. #5
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ciao, se assegni una classe puoi utilizzare il metodo addClassRules().

    Quindi potresti scrivere una cosa di questo genere:
    codice:
    $.validator.addClassRules('tuaClasse', { digits: true });
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  6. #6
    Utente di HTML.it L'avatar di Sonikag
    Registrato dal
    Mar 2004
    Messaggi
    2,080
    Grazie! Sono riuscita a provare ora e ho dei problemi di "sintassi" per adattare il tutto.
    Adesso se faccio in questo modo funziona:
    codice:
    $(document).ready(function() {
     
             $('#form').validate ({
                         rules: {
                          pippo: {
                          digits: true,
                          },                  
    
                         },
                          submitHandler: function() { 
    ....
    Ovviamente li ho forzato il nome di una input per verificare il funzionamento.
    Se sostituisco il codice così però non mi da errore, ma non funziona nemmeno.

    codice:
    $(document).ready(function() {
     
             $('#form').validate ({
    jQuery.validator.addClassRules("due", {
      digits: true,
    });
    
                         },
                     
                        
    
                          submitHandler: function() {
    due ovviamente è il nome della classe delle mie input.
    Sonia

  7. #7
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    $('#form').validate ({
    jQuery.validator.addClassRules("due", {
    digits: true,
    });
    Penso che il metodo addClassRules() vada usato fuori dal validate().
    Vedi la documentazione https://jqueryvalidation.org/jQuery....addClassRules/
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  8. #8
    Utente di HTML.it L'avatar di Sonikag
    Registrato dal
    Mar 2004
    Messaggi
    2,080
    Grazie!
    Infatti avevo intuito, ma continua a non andare. Posto il codice integrale così forse capite:
    Così funziona
    codice:
    $(document).ready(function() {
              $('#form').validate ({
                        rules: {
                          pippo: {
                          digits: true,
                          },     
    
                        },
    
    
                          submitHandler: function() {
                                var data_form = $('#form').serialize();
                                $.ajax({
                                    url: 'ag_aggiungi.php',
                                    type : 'POST',
                                    datatype : 'html',
                                    data : data_form,
                                    timeout: 3000, 
                                    
                                   success: function(response) {
                                  
                                   switch (response) {
          
                      case "RAGIONE_EMPTY":
                      alert( "Ragione sociale obbligatorio" );
                                      return false; 
    
                                      }  //end switch
                                                             
                                      messaggio = "<p class='inviato'>" + "Articolo inserito con successo!" + "</br>" + "</br>" + "</p>";
                                       $('#form').fadeOut('slow', function() {
                                       $(messaggio).insertAfter('#modulo h1'); 
                                       });
                                
                                   }, //end success
                                   
                                    error: function(response) { alert("Errore di comunicazione"); },
                                    complete: function() {    }
                                     }); //end ajax
                                      
                                    return false;    
                                   }  // end submit handler                      
                                                        
                          });   // end validate
                                            
                  });     
    </script>
    Mentre così non va
    codice:
    $(document).ready(function() {
                                           
    jQuery.validator.addClassRules({
      due: {
        required: true,
        minlength: 2
      },
    
    
    
    
                          submitHandler: function() {
                                var data_form = $('#form').serialize();
                                $.ajax({
                                    url: 'ag_aggiungi.php',
                                    type : 'POST',
                                    datatype : 'html',
                                    data : data_form,
                                    timeout: 3000, 
                                    
                                   success: function(response) {
                                  
                                   switch (response) {
          
                      case "RAGIONE_EMPTY":
                      alert( "Ragione sociale obbligatorio" );
                                      return false; 
    
                                      }  //end switch
                                                             
                                      messaggio = "<p class='inviato'>" + "Articolo inserito con successo!" + "</br>" + "</br>" + "</p>";
                                       $('#form').fadeOut('slow', function() {
                                       $(messaggio).insertAfter('#modulo h1'); 
                                       });
                                
                                   }, //end success
                                   
                                    error: function(response) { alert("Errore di comunicazione"); },
                                    complete: function() {    }
                                     }); //end ajax
                                      
                                    return false;    
                                   }  // end submit handler                      
                                                        
                          });   // end validate
                                            
                  });     
    </script>

  9. #9
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Uuuh! pasticciona

    Le due cose vanno separate. Uno è il metodo validate(), che usi per impostare tutto l'ambaradan (comprese le regolo sugli elementi che puoi identificare col name), mentre l'altro è il metodo addClassRules() che usi, separatamente, se ti serve applicare delle regole in base ad una classe.

    Qui un esempio (fai attenzione anche ai commenti e alla nota):
    codice:
    <!DOCTYPE HTML>
    <html>
       <head>
          <title>Esempio</title>
          <meta charset="utf-8">
          <!--
             Per includere la libreria jQuery e il plugin Validation sto usando dei CDN,
             ma tu ovviamente potresti avere incluso i file .js presenti direttamente nel tuo progetto.
             Lo script dovrebbe funzionare comunque allo stesso modo se i file sono inclusi correttamente.
          -->
          <script src="http://code.jquery.com/jquery-latest.min.js"></script>
          <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.17.0/jquery.validate.min.js"></script>
          
          <script>
             $(function() {
    
                // Qui il metodo addClassRules in cui puoi definire varie regole per varie classi
                $.validator.addClassRules({
                   due: {
                      required: true,
                      minlength: 2
                   },
                   numerico: {
                      digits: true
                   }
                });
                
                // Qui tutto il resto del validate con le regole per gli elementi definiti con name ed eventuali altre cose
                $('#form').validate({
                   rules: {
                      pippo: {
                         digits: true
                      }
                   }
                   // ...
                });
                
             });
          </script>
       </head>
       <body>
          <form id="form">
             name="pippo" (digits): <input name="pippo">
             <br><br>
             class="numerico" (digits): <input name="a" class="numerico">
             <br><br>
             class="numerico" (digits): <input name="b" class="numerico">
             <br><br>
             class="due" (required, minlength: 2): <input name="c" class="due">
             <br><br>
             class="due" (required, minlength: 2): <input name="d" class="due">
          </form>
          <hr>
          <small style="color:red">NOTA: per gli elementi da validare con la classe deve essere specificato comunque anche un proprio name o id, altrimenti il sistema potrebbe entrare in confusione.</small>
       </body>
    </html>
    Vedi se riesci ad applicarlo al tuo progetto. Facci sapere.
    Buon proseguimento.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  10. #10
    Utente di HTML.it L'avatar di Sonikag
    Registrato dal
    Mar 2004
    Messaggi
    2,080
    Grazie!
    Per semplificarla al massimo ho fatto così:
    codice:
    <script>
                $.validator.addClassRules({
                   due: {
                      digits: true
                   }
                });
     
    </script>
    e non va
    e la mia input l'ho semplificata così:
    codice:
    <input id="pippo" name="pippo" maxlength="2" class="due" type="text">

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.