web-dev-qa-db-fra.com

Liste déroulante de validation JQuery

J'utilise le plugin de validation de ici . J'essaie de forcer l'utilisateur à sélectionner une option dans la liste déroulante, voici donc mon code HTML pour la liste:

Select the best option<br/>
<select name="dd1" id="dd1">
<option value="none">None</option>
<option value="o1">option 1</option>
<option value="o2">option 2</option>
<option value="o3">option 3</option>
</select> <br/><br/>​

Et voici le truc de validation jquery:

$("#everything").validate({
    onsubmit: true,
    rules: {
     dd1: {
      required: {
        depends: function(element) {
            return $("#dd1").val() == "none";
        }
      }
    },
    messages: {
     dd1: {
      required: "Please select an option from the list, if none are appropriate please select 'Other'",
     },
    }
});

Je ne vois aucun problème, mais même si je ne sélectionne aucun élément dans la liste déroulante et clique sur Soumettre, il ne le valide pas et ne montre donc aucun message. Quelqu'un peut-il me dire ce que je fais mal?

jqueryhtmlvalidationdrop-down-menujquery-validate
25
Richard

La documentation for required() indique:

Pour forcer un utilisateur à sélectionner une option dans une zone de sélection, indiquez une option vide telle que <option value="">Choose...</option>.

En ayant value="none" dans votre balise <option>, vous empêchez l'appel de validation d'être effectué. Vous pouvez également supprimer votre règle de validation personnalisée, ce qui simplifie votre code. Voici un jsFiddle le montrant en action:

http://jsfiddle.net/Kn3v5/

Si vous ne pouvez pas changer l'attribut value en chaîne vide, je ne sais pas quoi vous dire ... Je ne pourrais trouver aucun moyen de le faire valider autrement.

63
Ethan Brown

Comme nous le savons, le plug-in de validation jQuery invalide le champ de sélection lorsqu'il a une valeur vide. Pourquoi ne pas définir sa valeur à blanc lorsque cela est nécessaire.

Oui, vous pouvez valider le champ de sélection avec une valeur prédéfinie.

$("#everything").validate({
    rules: {
        select_field:{
            required: {
                depends: function(element){
                    if('none' == $('#select_field').val()){
                        //Set predefined value to blank.
                        $('#select_field').val('');
                    }
                    return true;
                }
            }
        }
    }
});

Nous pouvons définir une valeur vide pour le champ sélectionné, mais dans certains cas, nous ne le pouvons pas. Pour Ex: utiliser une fonction qui génère un champ Dropdown pour vous et que vous n’avez pas le contrôle dessus.

J'espère que ça aide comme ça m'aide.

6
Nishant Kumar

C'était ma solution:

J'ai ajouté required à la balise select:

                <div class="col-lg-10">
                <select class="form-control" name="HoursEntry" id="HoursEntry" required>
                    <option value="">Select.....</option>
                    <option value="0.25">0.25</option>
                    <option value="0.5">0.50</option>
                    <option value="1">1.00</option>
                    <option value="1.25">1.25</option>
                    <option value="1.5">1.50</option>
                    <option value="2">2.00</option>
                    <option value="2.25">2.25</option>
                    <option value="2.5">2.50</option>
                    <option value="3">3.00</option>
                    <option value="3.25">3.25</option>
                    <option value="3.5">3.50</option>
                    <option value="4">4.00</option>
                    <option value="4.25">4.25</option>
                    <option value="4.5">4.50</option>
                    <option value="5">5.00</option>
                    <option value="5.25">5.25</option>
                    <option value="5.5">5.50</option>
                    <option value="6">6.00</option>
                    <option value="6.25">6.25</option>
                    <option value="6.5">6.50</option>
                    <option value="7">7.00</option>
                    <option value="7.25">7.25</option>
                    <option value="7.5">7.50</option>
                    <option value="8">8.00</option>
                </select>
3
JoshYates1980

Le moyen le plus simple de le faire est d’ajouter required à votre select 

Select the best option
<br/>

<select name="dd1" id="dd1" required>
<option value="none">None</option>
<option value="o1">option 1</option>
<option value="o2">option 2</option>
<option value="o3">option 3</option>
</select> 

<br/><br/>​
1
Dulith De Costa
$(document).ready(function(){
$("#HoursEntry").change(function(){
var HoursEntry = $(#HoursEntry option:selected).val();
if(HoursEntry == "")
{
$("#HoursEntry").html("Please select");
return false;
}
});
});
0
user
    <div id="msg"></div>
<!-- put above tag on body to see selected value or error -->
<script>
    $(function(){
        $("#HoursEntry").change(function(){
            var HoursEntry = $("#HoursEntry option:selected").val();
            console.log(HoursEntry);
            if(HoursEntry == "")
            {
                $("#msg").html("Please select at least One option");
                return false;
            }
            else
            {
                $("#msg").html("selected val is  "+HoursEntry);
            }
        });
    });
</script>
0
Amit Joshi