8 thoughts on “Validazione di una form con JQuery”

1. Grazie per questo articolo, è da due giorni che mi scervello per trovare il modo di poter fare “submit” solo in determinate condizioni, quali: password lunghe, uguali l’una con l’altra etc…
   Proverò subito ad utilizzare questo metodo, personalmente stavo utilizzando un codice simile al seguente per poter capire se ci fossero le condizioni per disabilitare o abilitare il tasto “submit” ma non ho trovato nessuna soluzione:

   $(function() {
   var x = $(“#paw”);
   var y = $(“#ugualePassw”);
   if (x == y && x != “” && y != “”) {
   alert(“non è disabilitato(in teoria!)”);
   $(“#submit”).removeAttr(“disabled”);

   }
   else {
   $(“#submit”).attr(“disabled”, “disabled”);
   alert(“è disabilitato(in teoria!)”);
   }
   })

   Rispondi

2. E se nel form ci fosse anche un campo “confirm password” come si otterrebbe la validazione?

   Rispondi

   1. Non so se ho capito il tuo dubbio ma provo a risponderti: la validazione la fai analogamente al campo password. Il campo di input avrà un name diverso ad esempio name=”confirm_password” e quindi:
      ……,
      confirm_password : {
      required : true,
      // Settiamo la lunghezza minima e massima per il campo confirm_password
      minlength : 5,
      maxlength : 8
      }

      Rispondi

3. Avrei una domanda, io uso il vostro sistema di validazione delle form da un po’ di tempo, adesso mi è capitato di avere un campo particolaer da dover aggiungere che è il codice SDI per la fatturazione elettronica, che ha alcune regole che mi sono scritto, se è idDestinatario deve essere lungo 7 caratteri e non avere caratteri speciali, se è una PEC deve essere formato mail e lungo quanto si vuole, c è un modo di inserire queste regole all’ interno della form validation così da avere un blocco lato client su un eventuale inserimento errato del codice?
   su altri campi io ho messo un messaggio personalizzato di errore, qui io vorrei che riconoscesse il tipo di codice e mettesse eventuali messaggi di errori (e il campo sbagliato in rosso) quando si inserisce rendendo bloccato l’ ok per andare avanti.
   Qui il codice che ho per tutti glia altri campi:
   [CODE]
   var FormValidation = function() {

   return {
   //main function to initiate the module
   init: function() {
   var error1 = $(‘.alert-danger’, form1);
   var success1 = $(‘.alert-success’, form1);

   form1.validate({
   errorElement: ‘span’, //default input error message container
   errorClass: ‘help-block help-block-error’, // default input error message class
   focusInvalid: true, // do not focus the last invalid input
   ignore: “”, // validate all fields including form hidden input

   rules: {
   idSOCIETA: {
   minlength: 2,
   required: true
   },
   idCAP: {
   number: true
   },
   idCAP_R: {
   number: true
   },
   idEMAIL: {
   email: true
   },
   idEMAIL_R: {
   email: true
   },
   idTELEFONO: {
   number: true,
   minlength: 7,
   },
   idCELLULARE: {
   number: true,
   minlength: 7,
   },
   idTELEFONO_R: {
   number: true,
   minlength: 7,
   },
   idCELLULARE_R: {
   number: true,
   minlength: 7,
   }

   },
   messages: {
   idSOCIETA: {
   minlength: “deve essere lunga almeno 2 caratteri!”,
   required: “Inserire il nome della Società”
   },
   idCAP: {
   number: “deve essere composto da numeri”
   },
   idCAP_R: {
   number: “deve essere composto da numeri”
   },
   idTELEFONO: {
   number: “deve essere composto da numero”,
   minlength: “deve essere lunga minimo 7 cifre”,
   },
   idTELEFONO_R: {
   number: “deve essere composto da numero”,
   minlength: “deve essere lunga minimo 7 cifre”,
   },
   idCELLULARE: {
   number: “deve essere composto da numero”,
   minlength: “deve essere lunga minimo 7 cifre”,
   },
   idCELLULARE_R: {
   number: “deve essere composto da numero”,
   minlength: “deve essere lunga minimo 7 cifre”
   },
   idEMAIL: “la mail deve contenere @ e . “,
   idEMAIL_R: “la mail deve contenere @ e . “,
   },

   errorPlacement: function(error, element) { // render error placement for each input type
   $(“#campi_obbligatori”).text(error[0].innerText);
   var cont = $(element).parent(‘.input-group’);
   if (cont) {
   cont.after(error);
   } else {
   element.after(error);
   }
   },
   highlight: function(element) { // hightlight error inputs
   $(element).closest(‘.form-group’).addClass(‘has-error’); // set error class to the control group
   },
   unhighlight: function(element) { // revert the change done by hightlight
   $(element).closest(‘.form-group’).removeClass(‘has-error’); // set error class to the control group
   },
   success: function(label) {
   label.closest(‘.form-group’).removeClass(‘has-error’); // set success class to the control group
   },
   submitHandler: function(form) {
   success1.show();
   error1.hide();
   }
   });

   [/CODE]

   Rispondi

   1. Dovresti scrivere un custom validator usando addmethod in cui definisci le tue regole di validazione. Una cosa del tipo:

      jQuery.validator.addMethod(“codiceSDI”, function(value, element) {
      var condition = (!isNAN(value) && value.length==7) || value.indexOf(‘@’) > 0;
      return condition;
      }, “Codice SDI non valido”);

      e poi la associ al tuo campo:

      $(‘#myform’).validate({
      rules: {
      codsdi: {
      codiceSDI: true
      }
      }
      ………
      });

      https://jqueryvalidation.org/jQuery.validator.addMethod/

      Rispondi

4. jQuery.validator.addMethod(“codiceSDI”, function(value, element) {

   var condition = (/^[\w\.\-]+@\w+[\w\.\-]*?\.\w{1,4}$/.test(value)) || (value.length == 7 && /[A-Z]/.test(value));
   return condition;

   }, “Codice SDI non valido”);

   Mi funziona ma io non lo voglio required il campo, cioè solo se ci scrivi dentro devono partire i controlli, se è vuoto va bene così.

   COme si fa??

   Rispondi

5. Era una stupidaggine, ho risolto:

   jQuery.validator.addMethod(“codiceSDI”, function(value, element) {

   var condition = (value == “”) || (/^[\w\.\-]+@\w+[\w\.\-]*?\.\w{1,4}$/.test(value)) || (value.length == 7 && /[A-Z]/.test(value));
   return condition;

   }, “Codice SDI non valido”);

   Rispondi

6. Hai provato ad aggiungere al campo: required : false ?
   $(‘#myform’).validate({
   rules: {
   codsdi: {
   required : false,
   codiceSDI: true
   }
   }

   Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.