39 votes

Valider la boite de sélection

J'utilise le plugin jQuery Validation pour valider un formulaire. J'ai une liste de sélection ressemblant à ceci:

 <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>
 

Maintenant, je veux m'assurer que l'utilisateur sélectionne autre chose que "Choisir une option" (celle par défaut). Pour que cela ne soit pas valide si vous choisissez la première option. Comment cela peut-il être fait?

58voto

redsquare Points 47518

Il suffit d'ajouter une classe de requis à la sélection

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

13voto

Jeremy Visser Points 1692

Pour commencer, vous pouvez "désactiver" l’option de sélection accidentelle par les utilisateurs:

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

Ensuite, dans votre événement JavaScript (que ce soit jQuery ou JavaScript), pour que votre formulaire valide si il est défini, faites:

 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;
 

Ou quelque chose à cet effet.

2voto

Je ne sais pas comment est le plugin le temps, la question a été posée (2009), mais j'ai connu le même problème aujourd'hui et résolu de cette façon:

  1. Donner votre balise select un nom d'attribut. Par exemple, dans ce cas

    <select name="myselect">

  2. Au lieu de travailler avec la valeur de l'attribut="valeur par défaut" dans la balise option, désactivez l'option par défaut comme suggéré par Jeremy Visser ou set value=""

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

    ou

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

  3. Définir le plugin règle de validation

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

    ou

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

Obs: redsquare la solution ne fonctionne que si vous avez juste un select dans votre formulaire. Si vous voulez sa solution à travailler avec plus d'une sélectionnez ajouter un attribut de nom à votre sélection.

Espérons que cela aide! :)

-3voto

Anand Pandey Points 1
   <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//

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by: