jquery validate, necessità di validare almeno un elemento select su due

MarcoGrazia

Utente Attivo
15 Dic 2009
852
20
28
63
Udine
www.stilisticamente.com
Ciao, non so se il titolo è chiaro, comunque il mio problema è questo:
Ho un form che mi deve lanciare una statistica, l'utente può scegliere tra lanciare una statistica trimestrale o una mensile.
Il form è fatto da:
una select che identifica gli anni, predefinito è l'anno corrente, quindi non la verifico.
Due select: una che ha per opzioni i tre trimestri, e l'altra con i mesi.
Queste ultime due select sono mutuamente selezionabili, cioè o scegli una o scegli l'altra.

Sto validando il form con il plugin di jquery validate(), ma non riesco a gestire la validazione; in pratica seguendo alcuni esempi trovati anche in questo forum, non sono venuto a capo di nulla.

Un poco di codice, tanto per capirci
biggrin.gif

HTML - Le tre select
HTML:
<!-- Anno -->
<div class="col-sm-4">
   <select class="form-control" name="annualita">
       <option value="2019">2019</option>
   </select>
</div>

<!-- Trimestre -->
<div class="col-sm-4">
   <select class="form-control" id="trimestre" name="trimestre">
       <option value="default">Trimestri...</option>
       <option value="1">Primo trimestre</option>
       <option value="2">Secondo trimestre</option>
       <option value="3">Terzo trimestre</option>
   </select>
</div>

<!-- Mensile -->
<div class="col-sm-4">
   <select class="form-control" id="mensilita" name="mensilita">
       <option value="default">Mensilità...</option>
       <option value="1">1. gennaio</option>
       <option value="2">2. febbraio</option>
       <option value="3">3. marzo</option>
       <option value="4">4. aprile</option>
       <option value="5">5. maggio</option>
       <option value="6">6. giugno</option>
       <option value="7">7. luglio</option>
       <option value="8">8. agosto</option>
       <option value="9">9. settembre</option>
       <option value="10">10. ottobre</option>
       <option value="11">11. novembre</option>
       <option value="12">12. dicembre</option>
   </select>
</div>
Il poco di Javascript creato fino a qui.
Codice:
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript">
   "use strict";


   $(function () {


       $('#form-stat').validate({
           rules: {
               trimestre: {
                   required: function() {
                       return $("#mensilita").val() === '';
                   }
               },
               mensilita: {
                   required: function() {
                       return $("#trimestre").val() === '';
                   }
               }
           },
           messages: {
               trimestre: {
                   required: 'Devi scegliere almeno un periodo.'
               },
               mensilita: {
                   required: 'Devi scegliere almeno un periodo.'
               }
           }
       });
   });
</script>
Ho usato l'esempio riportato da questo forum, vedi link sopra, ma non funziona in nessun caso.
In pratica, ora come ora se premo il tasto di invio, il form viene sempre e comunque inviato, mentre se tutti e due i campi riportano il valore "default" non deve essere inviato.
 
Risolto con una semplice funzione creata ad hoc
biggrin.gif


Codice:
var trimestre = $('#trimestre');
var mensilita = $('#mensilita');
var invio = $('button[name="stampa"]');
                
    $('#trimestre, #mensilita').on('change', function() {
        if ($(this).val() != 'default') {
            switch ($(this).prop('id')) {
                case 'trimestre':
                    mensilita.prop('disabled', true);
                    invio.prop('disabled', false);
                    break;
                case 'mensilita':
                    trimestre.prop('disabled', true);
                    invio.prop('disabled', false);
                    break;
            }
        }
    });
In pratica quando seleziono una select a case, a meno che non selezioni l'opzione di default, disabilito l'altra select e abilito il tasto di invio.
E tolgo pure un plugin ora inutile al progetto, risparmiando byte :D
 

Discussioni simili