2009-08-13 30 views
49

Sto utilizzando il plug-in jQuery Validation per convalidare un modulo. Ho una lista di selezione simile a questo:Convalida casella di selezione

<select id="select"> 
<option value="">Choose an option</option> 
<option value="option1">Option1</option> 
<option value="option2">Option2</option> 
<option value="option3">Option3</option> 
</select> 

Ora, voglio fare in modo che l'utente seleziona tutt'altro che "Scegliere un'opzione" (che è quella predefinita). In modo che non si convalida se si sceglie la prima opzione. Come si può fare?

+0

In realtà mi sono imbattuto in questa domanda a causa di un errore nell'inserimento di un altro posto nel mio jQuery ... Non ho avuto problemi a farlo funzionare nel modo esatto suggerito. Forse jQuery ha implementato questa funzione dal 2009. – cregox

+0

controlla la mia risposta qui http://stackoverflow.com/a/40909817/4251431 –

risposta

71

Basta aggiungere una classe di richiesta per la selezionare

<select id="select" class="required"> 
+0

Mi sento così stupido. Non ho mai pensato che funzionasse anche su scatole selezionate. Grazie – ponjoh

+0

Nessun problema. Buona fortuna – redsquare

+17

funziona bene finché si imposta il valore su stringa vuota Selezionare – tjjjohnson

17

Per cominciare, è possibile "Disattiva" l'opzione venga selezionata accidentalmente dagli utenti:

<option value="" disabled="disabled">Choose an option</option> 

Poi, all'interno del vostro evento JavaScript (non importa se è jQuery o JavaScript), per il tuo modulo per verificare se è impostato, fare:

select = document.getElementById('select'); // or in jQuery use: select = this; 
if (select.value) { 
    // value is set to a valid option, so submit form 
    return true; 
} 
return false; 

O qualcosa del genere.

+0

Grazie Funziona bene ... –

-2
<script type="text/JavaScript"> 
function validate() 
{ 
if(document.form1.quali.value == "-1") 
    { 
    alert("Please select qualification!"); 
    return false; 
    } 
} 

</script> 
<form name="form1" method="post" action="" onsubmit="return validate(this);"> 
<select name="quali" id="quali" "> 
     <option value="-1" selected="selected">select</option> 
     <option value="1">Graduate</option> 
     <option value="2">Post Graduate</option> 
     </select> 
</form> 





// this code works 110% tested by me after many complex jquery method validation but it is simple javascript method plz try this if u fail in drop down required validation// 
4

non so come è stato il plugin momento in cui la domanda è stata posta (2009), ma ho affrontato lo stesso problema di oggi e risolto in questo modo:

  1. Lascia la tua tag select un attributo nome Per esempio in questo caso

    <select name="myselect">

  2. Invece di lavorare con il valore di attributo = "default" nell'opzione tag, disattivare l'opzione di default, come suggerito da Jeremy Visser o valore impostato = ""

    <option disabled="disabled">Choose...</option>

    o

    <option value="">Choose...</option>

  3. Impostare la regola di convalida plug

    $("#YOUR_FORM_ID").validate({ rules: { myselect: { required: true } } });

    o

    <select name="myselect" class="required">

Obs: La soluzione di redsquare funziona solo se si dispone di un solo selezionare nel modulo. Se vuoi che la sua soluzione funzioni con più di una selezione aggiungi un attributo nome alla tua selezione.

Spero che aiuti! :)

2
<select id='bookcategory' class="form-control" required=""> 
        <option value="" disabled="disabled">Category</option> 
        <option value="1">LITERATURE & FICTION</option> 
        <option value="2">NON FICTION</option> 
        <option value="3">ACADEMIC</option> 
      <option value="4">CHILDREN & TEENS</option> 

       </select> 

La convalida del modulo HTML può essere eseguita automaticamente dal browser. Prova il codice sopra:
Il resto verrà eseguito automaticamente, non è necessario creare alcuna funzione js solo questo menu a discesa e un pulsante di invio.

+0

Si potrebbe voler aggiungere l'attributo selezionato alla prima opzione in modo che il browser inizi con quell'etichetta per renderlo più visibile all'utente. –

0
if (select == "") { 
    alert("Please select a selection"); 
    return false; 

Questo dovrebbe funzionare per voi. Lo ha fatto solo per me.

0

Forse c'è un modo più breve ma questo funziona per me.

<script language='JavaScript' type='text/javascript'> 
    function validateThisFrom(thisForm) { 
     if (thisForm.FIELDNAME.value == "") { 
      alert("Please make a selection"); 
      thisForm.FIELDNAME.focus(); 
      return false; 
     } 
     if (thisForm.FIELDNAME2.value == "") { 
      alert("Please make a selection"); 
      thisForm.FIELDNAME2.focus(); 
      return false; 
     } 
    } 
</script> 
<form onSubmit="return validateThisFrom (this);"> 
    <select name="FIELDNAME" class="form-control"> 
     <option value="">- select -</option> 
     <option value="value 1">Visible info of Value 1</option> 
     <option value="value 2">Visible info of Value 2</option> 
    </select> 
    <select name="FIELDNAME2" class="form-control"> 
     <option value="">- select -</option> 
     <option value="value 1">Visible info of Value 1</option> 
     <option value="value 2">Visible info of Value 2</option> 
    </select> 
</form> 
0

Si desidera assicurarsi che l'utente selezioni tutto tranne "Scegli un'opzione" (che è quella predefinita). In modo che non si convalida se si sceglie la prima opzione. Come si può fare?

È possibile eseguire questa operazione aggiungendo semplicemente l'attributo obbligatorio = "richiesto" nel tag select. si può vedere nella figura code

<select id="select" required="required"> 
<option value="">Choose an option</option> 
<option value="option1">Option1</option> 
<option value="option2">Option2</option> 
<option value="option3">Option3</option> 
</select> 

Ha funzionato bene per me a chorme, Firefox e Internet Explorer. Grazie

Problemi correlati