Visibilità e Validazione condizionati da altri campi

[carlo-di-pavia]

Premetto che ho Chronoforms v4.0.1 + Joomla 2.5.16 e che il mio template usa Bootstrap.
Questo è quello che Vales chiama Form a geometria variabile, di cui ha fatto una guida per una versione precedente di Chronoform.
La mi a domanda è questa:
Viste le potenzialità di Bootstrap e di Chronoform 4.0.1, non c'è un modo più semplice di far scomparire uno o più campi in base alla scelta delle opzioni di un campo "padre"?
In Bootstrap esiste il Collapse http://getbootstrap.com/javascript/#collapse ma penso che con jQuery si possa fare anche di meglio, ma non so bene come.
Come si risolve il problema dei campi nascosti che però sono obbligatori?

Grazie

[mmleoni]

in ritardo, ma visto che nessuno risponde...

a dire il vero bootstrap è basato su jquery...

solitamente per far scomparire una serie di campi li si inserisce in un div e si usano i metodi show(), hide() o toggle() di jquery, visto che di questa stiamo parlando.

per quanto riguarda l'obbligatorietà dei campi potresti, sempre tramite jquery, rimuovere la classe 'validate' dal campo in questione.

ciao

[carlo-di-pavia]

Grazie per la risposta.
In effetti lo so che Bootstrap si basa su JQuery (mentre chronoforms su mootools purtroppo).
Ho risolto inserendo in Events -> Load JS dei codici come questo di esempio:

Codice: [Seleziona]

(function($){
  $(document).bind('ready', function() {
    $(window).load(function(){
      $('#genere_0').change(function() {
        if ($(this).is(':checked')) {
          $('div.persona').show();
          $('div.societa').hide();
        } else {
          $('div.persona').hide();
          $('div.societa').show();
        }
      });
      $('#genere_1').change(function() {
        if ($(this).is(':checked')) {
          $('div.persona').show();
          $('div.societa').hide();
        } else {
          $('div.persona').hide();
          $('div.societa').show();
        }
      });
      $('#genere_2').change(function() {
        if ($(this).is(':checked')) {
          $('div.persona').hide();
          $('div.societa').show();
        } else {
          $('div.persona').show();
          $('div.societa').hide();
        }
      });
    });
  });
})(jQuery);
In questo caso ho la domanda tipo Radio Box chiamata genere le cui opzioni sono:

Codice: [Seleziona]

1=Maschio
2=Femmina
3=Persona giuridicae poi ho dei container relativi alle persone a cui ho aggiunto la classe persona e dei container relativi alle persone giuridiche a cui ho aggiunto la classe societa.
In questo modo funziona.

La mia domanda sulla classe validate['required'] o  validate['required','number'], ecc. è questa:
Per togliere la classe penso si debba fare un javascript strreplace() o qualcosa del genere, ma per rimetterla come faccio? Devo farlo per ogni campo del container? Viene un lavoro immane così.
Non si potrebbe fare una funzione con un array di campi a cui assegnare o togliere le classi validate con i suoi attributi tra parentesi quadre (es.: validate['required','number']) e rimetterle con un'altra funzione?
Oppure fare una validazione solo sui campi visibili.
Grazie per l'aiuto.

[mmleoni]

insomma avevi già fatto tutto... chi fa da sé fa per tre

in jquery hai i metodi addClass() e removeClass() (api.jquery.com/addClass/) per l'operazione specifica, ma prima di pensare a come farlo per tutta la form sarebbe da verificare se la cosa funziona.
se la procedura controlla la form all'inizializzazione del codice, così come fa il tuo codice, per associare gli event handler allora bisognerà agire su questi ultimi e non sulle classi.

ciao,
marco

[carlo-di-pavia]

se la procedura controlla la form all'inizializzazione del codice, così come fa il tuo codice, per associare gli event handler allora bisognerà agire su questi ultimi e non sulle classi.

Grazie per l'aiuto, ma quello che hai detto e che ho citato per me è arabo... (non parlo arabo ma posso sempre impararlo  )
Potresti spiegarti meglio in termini di tipi di Events da aggiungere e dove aggiungerli (On Load, On Submit, ecc.)?

[mmleoni]

pare che la cosa sia più semplice. 

fatta una rapida ricerca, parrebbe che per disabilitare la validazione sia sufficiente aggiungere la proprietà 'disabled' al campo in questione, quindi:

per abilitare
$("#inputID").prop('disabled', true);

per disabilitare
$("#inputID").prop('disabled', false);
oppure
$("#inputID").removeAttr('disabled');

prova ad inserirli per disabilitare/abilitare i campi della persona e/o della società.

ps: nota che una scrittura come questa dovrebbe essere più veloce:

Codice: [Seleziona]

$('div.persona input').prop('disabled', true);
disattivando tutti gli input nel div persona in un colpo.

ciao,
marco

[johnny64]

Ciao Marco,
anch'io ho un problema con la validazione di un form dove vi sono campi condizionati, ho provato con jQuery (no conflict) ed un ciclo "if" a rimuovere la classe "validate[required]" dei campi nascosti (per la condizione false) con i seguenti:
$("#idcampo").removeClass("validate[required]");
$("#idcampo").removeAttr('disabled');
$('div.delcampo input').prop('disabled', true);
  ma nulla di fatto!
Hai altri suggerimenti?
Grazie Ciao.

[mmleoni]

non devi agire sulla classe ma sulla proprietà 'disabled' del campo di input.
comunque debugger js attivo e occhio alla console degli errori.

ciao

[assospiz]

Per un'esigenza simile noi abbiamo risolto mettendo insieme le indicazioni di questo post:
http://www.chronoengine.com/faqs/58-cfv4/cfv4-elements-and-html/2657-how-can-i-build-a-combo-box-input.html
(che però con i radio come pilota non sembrava funzionare)
e quest'altro:
http://www.chronoengine.com/forums/viewtopic.php?p=276435

[johnny64]

Marco,
ho seguito il tuo consiglio ed ho provato con:
$("input[name=nomedelcampo]").prop('disabled', true);
ma non funzione!   
Ho anche provato a svuotare la classe nei campi del form (class="") ed a provare ad aggiungerli con:
("input[name=nomedelcampo]").addClass("validate['required']");
ma niente da fare! 
Sembra non ci sia rimedio!
Comunque grazie
Ciao

[mmleoni]

tanto per curiosità ho provato a farlo io...
ho creato una form.

1.
campo radiobutton nome "userType", con due bottoni
privato=privato
azienda=azienda

2.
tre campi con la classe impostata a 'privato' e required=yes: nome, cognome e codice fiscale

3.
due campi con la classe impostata a 'azienda' e required=yes: ragione sociale e partita iva

4.
negli eventi, prima di show html, un load js con il seguente codice:

Codice: [Seleziona]

(function($){
  $(document).bind('ready', function() {
    $(window).load(function(){
      $('input[name = "userType"]').click(function() {
        if ($('input[name = "userType"]:checked').val()=='azienda') {
            $('input.privato').prop('disabled', true);
            $('input.azienda').prop('disabled', false);
        } else {
            $('input.privato').prop('disabled', false);
            $('input.azienda').prop('disabled', true);
        }
      });
    });
  });
})(jQuery);

It works!, come diceva apache 
attiva e disattiva campi e validazione.

nota: è richiesto jquery 1.6+

ok, manca l'inizializzazione, ma era solo per controllare di non aver detto ca$$ate.

ciao,
marco

[assospiz]

Grazie mmleoni
Noi abbiamo trovato questa soluzione:
http://www.vascotto.it/index.php?option=com_chronoforms&chronoform=2_item_db_con_1_radio_pilota_3_radio

[carlo-di-pavia]

Grazie mille, io la sto rifacendo con il Multipage che è comodissimo.
Questo è il codice del primo step del wizard (ce ne sono tre di step):

Codice: [Seleziona]

(function($){
  $(document).bind('ready', function() {
    $(window).load(function(){
      //persona o societa
      //inizializza
      $('div.persona input').prop('disabled', false);
      $('div.societa input').prop('disabled', true);
      $('div.persona').show();
      $('div.societa').hide();
      //eventi change
      $('#genere_0').change(function() {
        if ($(this).is(':checked')) {
          $('div.persona input').prop('disabled', false);
          $('div.societa input').prop('disabled', true);
          $('div.persona').show();
          $('div.societa').hide();
        } else {
          $('div.persona input').prop('disabled', true);
          $('div.societa input').prop('disabled', false);
          $('div.persona').hide();
          $('div.societa').show();
        }
      });
      $('#genere_1').change(function() {
        if ($(this).is(':checked')) {
          $('div.persona input').prop('disabled', false);
          $('div.societa input').prop('disabled', true);
          $('div.persona').show();
          $('div.societa').hide();
        } else {
          $('div.persona input').prop('disabled', true);
          $('div.societa input').prop('disabled', false);
          $('div.persona').hide();
          $('div.societa').show();
        }
      });
      $('#genere_2').change(function() {
        if ($(this).is(':checked')) {
          $('div.persona input').prop('disabled', true);
          $('div.societa input').prop('disabled', false);
          $('div.persona').hide();
          $('div.societa').show();
        } else {
          $('div.persona input').prop('disabled', false);
          $('div.societa input').prop('disabled', true);
          $('div.persona').show();
          $('div.societa').hide();
        }
      });
    });
  });
})(jQuery);
Funziona benissimo, i campi si disabilitano e spariscono in toto grazie al fatto che ho messo tutti i campi persona e società in due container diversi.

Ora il problema è che devo caricare le stesse funzioni nel secondo e terzo step in base alle opzioni scelte del primo step.
Preciso che sto usando il plugin Multipage (qui la guida: http://www.chronoengine.com/faqs/57-cfv4/cfv4-actions/2658-how-can-i-create-a-multi-page-form.html) quindi ho gli eventi:
On Load <- qui c'è il primo Load JS che ho postato sopra
On Submit < questo è l'evento dell'invio finale
On Step 2 < questo è il secondo step dove ho campi che devono dis/abilitarsi in base a opzioni del primo step
On Step 3 < questo è il terzo step dove ho campi che devono dis/abilitarsi in base a opzioni del primo e del secondo step

Come faccio a leggere i dati dei campi degli step precedenti dalla sessione in jQuery?

Grazie

[carlo-di-pavia]

Ho trovato questa FAQ sul sito chronoforms http://www.chronoengine.com/faqs/63-cfv4/cfv4-working-with-form-data/2697-how-can-i-use-the-form-data.html
Se non ho capito male nell'ultimo paragrafo spiega che tra una pagina e l'altra di una form multipage, se metto un campo nella seconda pagina che ha lo stesso nome di un campo nella prima il valore sarà copiato nel secondo campo.
Ora provo a mettere un campo con lo stesso nome e vedere se funziona. Poi provo a nasconderlo e vi dico se funziona il Load JS nel secondo step.

[carlo-di-pavia]

Funziona!
Nell'esempio seguente ho una checkbox nello step 1 che si chiama no_auto e nello step due ho un'altra checkbox che si chiama no_targa.
Se no_auto è spuntata allora no_targa deve comparire, altrimenti no.
Nel secondo step ho aggiunto una hidden box dal nome no_auto e nell'evento Load JS ho messo quanto segue:

Codice: [Seleziona]


(function($){
  $(document).bind('ready', function() {
    $(window).load(function(){
      //auto acquistata si/no
      if ($('input[name=no_auto]').val()=='1') {
        $('#no_targa1_container_div').show();
        $('input#no_targa').prop('disabled', false);
      } else {
        $('#no_targa1_container_div').hide();
        $('input#no_targa').prop('disabled', true);
      }
    });
  });
})(jQuery);