Jquery Validate

[newbobotime]

Ciao Raga, urge aiutino
non riesco a capire come impostare il controllo per validare un campo (nome_campo) se viene precedentemente spuntato un checkbox (id_checkbox), ovvero;
Ho capito come validarlo se viene cliccato il checkbox (vedi primo codice), il problema è che il campo oltre a non rimanere vuoto deve essere validato rispettando un determinato formato, ed anche questo ho capito come farlo (vedi secondo codice), il problema è che no capisco come mettere insieme i due controlli, in pratica l'esigenza è; clicco sul checkbox e mi si apre il div dove ho il campo che deve rispettare il formato hh:mm, quindi se clicco il checkbox deve farmi il controllo diversamente non deve considerarlo, spero di essere stato comprensibile.

Qualcuno può aiutarmi ?

Grazie mille


questo mi valida il campo del formato delle hh:mm se viene cliccato il checkbox

nome_campo: {
    required: function(element) {
        return $("#id_checkbox").val() == "Y";                                        
    }                                                                                            
},

questo mi valida il formato delle hh:mm

$.validator.addMethod(
    "regex_hhmm",
    function(value, element, regexp) {
        var check = false;
        return this.optional(element) || regexp.test(value);
    }
);


nome_campo: {            
    required: true,
    regex_hhmm: /^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$/,
    maxlength: 5

},

.

[Vindav]

nome_campo: {            
    required: function(element) {
        return $("#id_checkbox").val() == "Y";                                        
    },
    regex_hhmm: /^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$/,
    maxlength: 5
}

[newbobotime]

nome_campo: {            
    required: function(element) {
        return $("#id_checkbox").val() == "Y";                                        
    },
    regex_hhmm: /^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$/,
    maxlength: 5
}

Grazie mille Vindav, adesso però è venuto fuori un altro problema di cui ero dimenticato.

In pratica il form è diviso in 2 parti, nella prima ci sono 3 campi e per validarli non ho problemi,
la seconda parte è formata da un div con all'interno 2 div ognuno con i relativi campi.

Quello che devo ottenere in pratica è la validazione dei campi relativi al div che l'utente decide di compilare.

Quindi, oltre a verificare se è fleggato il checkbox che in pratica apre il div grande, contenente come primo il gruppo dei radio button (1 e 2) che serviranno all'utente per scegliere quale dei 2 div aprire e quali campi compilare, nel frattempo ho modificato il controllo del checkbox come

 return $("#id_checkbox").prop('checked');

Adesso immagino di avere bisogno di un ulteriore controllo per capire quale radio button è valorizzato, pensavo di riuscire in questo modo

 return ($("#id_checkbox").prop('checked') && $("#id_radio").prop('checked');

ma non funge.
Qualche indicazione ?

[Vindav]

quel controllo va bene, c'è solo una parentesi tonda in più dopo "return". Nei campi che saranno attivati con il primo radio controllerai se quest'ultimo è valorizzato, e vicevera per i campi attivati con il secondo radio.

[newbobotime]

provato è funziona !!
grazie Vindav.

Ancora piccolo bug.
Ci sono alcuni campi obbligatori (required:true) che vengono popolati in automatico a seguito della selezione di menu (select)
quindi se l'utente clicca sul submit senza avere selezionato la select e quindi popolato i campi questi vanno in errore.
Il mio problema e che se si seleziona la select dopo che sono andati in errore rimangono in errore anche dopo essersi popolati, per togliere il msg di errore devo semplicemente cliccare sul campo, non è un grosso problema l'invio dei dati ha comunque successo, ma non è corretto mostrare all'utente che alcuni campi sono ancora in errore quando in realtà sono popolati.
Cosa posso fare per far si che vada via il msg di errore in contemporanea con la selezione della select ?
thanks

[Vindav]

posta il codice completo di validazione altrimenti non posso aiutarti

[newbobotime]

Scusa Vindav, sono solo riuscito a postarlo adesso.

Questo è un estratto del codice, l'integrale è molto più lungo ma come esempio penso possa bastare.

Quindi ricapitolando; funziona tutto, rimangono in errore solo i campi che vengono popolati tramite chiamata ajax (dopo utilizzo della select presente nel form) e per validarli bisogna cliccare sul campo.
Un altro problema da risolvere è il campo "as" che è dipendente dal campo "ps" nel senso che si tratta di 2 orari di cui il 1° (ps) significa partenza schedulata il 2° (as) arrivo schedulato, va da se che il 2° non può essere inferiore del primo.

Come faccio a far capire che uno deve essere inferiore all'altro in particolare quando il formato campo è hh:mm ?
Devo creare un nuovo metodo ?

$().ready(function() {
  $("#my-form").validate({
          rules: {
              date_report: {
                  required: true
              },
              date_event: {
                  required: true
              },
              note: {
                  required: true
              },            
              ps: {
                  required: function(element) {
                      return $("#id_checkbox").prop('checked') && $("#id_radio_1").prop('checked');                
                  },
                  regex_hhmm: /^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$/,
                  maxlength: 5
              },
              as: {           
                  required: function(element) {
                      return $("#id_checkbox").prop('checked') && $("#id_radio_1").prop('checked');                
                  },
                  regex_hhmm: /^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$/,
                  maxlength: 5
              }
  
          },        
          messages: {
              date_report: {
                  required: "<= campo obbligatorio"
              },
              date_event: {
                  required: "<= campo obbligatorio"
              },
              note: {
                  required: "<= campo obbligatorio"
              },
              ps: {
                  required: "<= error",
                  regex_hhmm: "<= error",
                  maxlength: "max 5 caratteri"
              },
              as: {
                  required: "<= error",
                  regex_hhmm: "<= error",
                  maxlength: "max 5 caratteri"
                  <!-- questo è dipendente dal campo ps, non deve essere inferiore come orario, es.: se ps = 06:30 questo deve essere almeno 06:35 -->
              }
          }        
     });
});

thanks




.

[Vindav]

Per il primo problema quello che mi interessa sapere è se la validazione avviene al focusout dei campi, se si, potresti provare dopo la chiamata ajax a impostare il focus da script ai 2 campi interessati e subito dopo impostare il blur cosi da attivare la validazione.

Per il secondo problema, si, devi creare un nuovo metodo

[newbobotime]

Per il primo problema quello che mi interessa sapere è se la validazione avviene al focusout dei campi, se si, potresti provare dopo la chiamata ajax a impostare il focus da script ai 2 campi interessati e subito dopo impostare il blur cosi da attivare la validazione

Uhm... non ti seguo.

Come faccio a verificare come avviene il focus out ?
Come faccio ad impostare il focus e blur con script ?

Mi aiuti con qualche esempio ?

thanks


.

[Vindav]

Tu hai detto:

funziona tutto, rimangono in errore solo i campi che vengono popolati tramite chiamata ajax, e per validarli bisogna cliccare sul campo

Questo succede perche al focus di un campo, il plugin si occupa di pulire la label degli errori. Quando i campi vengono valorizzati con ajax però non scatta il focus, quindi lo devi simulare tu. Per fare questo dopo aver effettuato la chiamata ajax e valorizzato il campo devi dargli il focus con $("#idCampo").focus() a questo punto scatterà la validazione, verranno effettuati i controlli e in caso di esito positivo verrà rimossa la label di errore. Se la validazione avviene al focusout e non al focus(non ricordo) oltre al focus devi anche scatenare il blur con $("#idCampo").blur(). Fai qualche prova.