Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it L'avatar di Marcolino's
    Registrato dal
    May 2003
    residenza
    Udine
    Messaggi
    3,606

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

    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
    HTML - Le tre select
    codice:
    <!-- 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.
    Ultima modifica di Marcolino's; 22-10-2019 a 11:17

  2. #2
    Utente di HTML.it L'avatar di Marcolino's
    Registrato dal
    May 2003
    residenza
    Udine
    Messaggi
    3,606
    Risolto con una semplice funzione creata ad hoc

    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

Tag per questa discussione

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 © 2025 vBulletin Solutions, Inc. All rights reserved.