Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it
    Registrato dal
    Jul 2005
    Messaggi
    2,614

    Campo obbligatorio anche se nascosto?

    Salve,
    ho questo script:
    codice:
    <script>
    function DropDown2(){
    if(document.info.professione.options[document.info.professione.selectedIndex].value=="altro"){
    document.getElementById('altro').style.display = "block";
    } else {
    document.getElementById('altro').style.display = "none";
    }
    }
    function load(){
    document.getElementById('altro').style.display = "none";
    }
    window.onload = load
    
    </script>
    <select name="professione" size="1" placeholder="Seleziona la tua professione" required  oninvalid="this.setCustomValidity('Seleziona la tua professione')"  onchange="DropDown2();">
    	<option value=""id="professione" selected>Seleziona la tua professione</option>
    								<option value="dottore commercialista">Dottore commercialista</option>
    								<option value="altro">Altro specificare</option>	
    								</select><br><br>
    <div id="altro"><input type="text" id="altro" name="altro" size="70" placeholder="Altro" required oninvalid="this.setCustomValidity('Indicare Altro')"  onchange="this.setCustomValidity('')" value=""><br></div>
    Il campo ALTRO è visibile se selezionato altro dalla select, fino a qui tutto ok, solo che anche se non seleziono nessuna voce della select quindi il campo altro non è visibile ai fini dell'invio del form è come se non fosse vuoto perchè obbligatorio.
    Come posso ovviare?
    Grazie

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,674
    Ciao, per prima cosa devi obbligatoriamente usare id univoci (id="altro", o sta sul div o sta sull'input, non esiste che stia su entrambi), poi potresti impostare l'attributo required, per quell'input, sempre via JavaScript in modo simile a ciò che hai fatto per style.display; in alternativa puoi impostargli il disabled che, se true, se ne frega del required.

    Occhio anche agli errori di validazione, non è permesso mettere l'attributo placeholder su un elemento select. Quel placeholder="Seleziona la tua professione" sarà comunque ignorato, non ha alcun senso metterlo su quel select.

    Inoltre considera che il value di un elemento select viene automaticamente determinato dal value dell'option scelta; per cui questa condizione, che hai scritto per quel select (andando a "pescare" l'indice selezionato):
    codice:
    document.info.professione.options[document.info.professione.selectedIndex].value=="altro"
    è una cosa ridondante, può essere ridotta in maniera molto più semplice, in questo modo:
    codice:
    document.info.professione.value=="altro"
    o addirittura anche senza document (sempre che tu non abbia sovrascritto la variabile info):
    codice:
    info.professione.value=="altro"
    Ottimizzando ancora il tuo script, si potrebbe scrivere in questo modo:
    codice:
    <script>
       function DropDown2(){
          var toggle = info.professione.value=="altro";
          document.getElementById('div_altro').style.display = toggle ? "block" : "none";
          info.altro.required = toggle;
       }
       function load(){
          DropDown2();
       }
       window.onload = load
    
    </script>
    <form name="info" >
       <select name="professione" size="1" required oninvalid="this.setCustomValidity('Seleziona la tua professione')" onchange="DropDown2();">
          <option value=""id="professione" selected>Seleziona la tua professione</option>
          <option value="dottore commercialista">Dottore commercialista</option>
          <option value="altro">Altro specificare</option>    
       </select><br><br>
       <div id="div_altro">
          <input type="text" id="altro" name="altro" size="70" placeholder="Altro" required oninvalid="this.setCustomValidity('Indicare Altro')" onchange="this.setCustomValidity('')" value=""><br>
       </div>
    
       <input type="submit" value="VAI">
    </form>
    Buon proseguimento
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

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