web-dev-qa-db-fra.com

Valider la 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?

javascriptjqueryhtmlvalidationforms
51
ponjoh

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

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

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.

19
Jeremy Visser

Je ne sais pas comment était le plugin à l'époque où la question a été posée (2009), mais j'ai rencontré le même problème aujourd'hui et l'ai résolu de cette façon:

  1. Donnez à votre balise select un attribut de nom. Par exemple dans ce cas

    <select name="myselect"> 

  2. Au lieu d'utiliser l'attribut value = "default" dans l'option de balise, désactivez l'option par défaut proposée par Jeremy Visser ou définissez value = ""

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

    ou

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

  3. Définir la règle de validation du plugin

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

    ou

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

Obs: La solution de redsquare ne fonctionne que si vous n'avez qu'un seul élément sélectionné dans votre formulaire. Si vous souhaitez que sa solution fonctionne avec plusieurs sélections, ajoutez un attribut de nom à votre sélection.

J'espère que ça aide! :)

4
Pedro Paulo Mendes Pereira
<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 validation du formulaire HTML peut être effectuée automatiquement par le navigateur ..__ Essayez le code ci-dessus:
Le reste tout se fera automatiquement, pas besoin de créer de fonctions js, juste ce menu déroulant et un bouton d'envoi.

2
Gurmeet Singh

vous voulez vous 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?

Vous pouvez le faire en ajoutant simplement attribute required = "required" dans la balise select. vous pouvez le voir dans le code ci-dessous

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

Cela a bien fonctionné pour moi chez Chorme, Firefox et Internet Explorer. Merci 

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

Cela devrait fonctionner pour vous. Cela a juste fait pour moi.

0
M. Ray

Peut-être y a-t-il un moyen plus court mais cela fonctionne pour moi.

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