JQuery Valider la liste Déroulante

Je suis en utilisant le plugin de validation de ici. Je suis en train de forcer l'utilisateur à sélectionner une option dans la liste déroulante, alors, voici mon 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 jquery validation des trucs:

$("#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 pas de problèmes, mais même quand je le sélectionnez aucun dans la liste déroulante et cliquez sur envoyer, il ne sera pas de la valider, et donc ne pas afficher les messages. Quelqu'un peut me dire ce que je fais mal?

Toute erreur javascript dans la console ? Peut-être pas le problème mais la bande inutile des virgules, comme après "dd1" dans "messages"

InformationsquelleAutor Richard | 2012-09-17

69

La la documentation pour required() états:

De forcer l'utilisateur à sélectionner une option dans une boîte de sélection, de fournir un vide, comme les options de <option value="">Choose...</option>

En ayant value="none" dans votre <option> tag, vous êtes à la prévention de la validation de l'appel à partir de n'être jamais en fait. Vous pouvez également supprimer votre règle de validation personnalisée, simplifier votre code. Voici un jsFiddle montrant en action:

http://jsfiddle.net/Kn3v5/

Si vous ne pouvez pas changer le value attribut à la chaîne vide, je ne sais pas quoi vous dire...je ne pouvais pas trouver tout de façon à obtenir pour valider le contraire.
- plus d'un an plus tard, toujours utile, c'est la beauté de la SORTE... merci. 🙂
InformationsquelleAutor Ethan Brown

Comme nous le savons jQuery valider plugin invalide Sélectionnez le champ quand il a de la valeur à blanc. Pourquoi ne pas régler sa valeur à vide lorsque requis.

Oui, vous pouvez valider sélectionnez le champ avec quelques 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 mettre en valeur vide pour sélectionner un champ, mais dans certains cas nous pouvons pas. Ex: à l'aide d'une fonction qui génère un champ Déroulant pour vous et vous n'avez pas le contrôle.

J'espère que cela aide qu'il m'aide.

InformationsquelleAutor Nishant Kumar

C'était ma solution:

J'ai ajouté nécessaire à 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>

InformationsquelleAutor JoshYates1980

Façon la plus simple de le faire est par l'ajout de required dans 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/>

InformationsquelleAutor Dulith De Costa

$(document).ready(function(){
$("#HoursEntry").change(function(){
var HoursEntry = $(#HoursEntry option:selected).val();
if(HoursEntry == "")
{
$("#HoursEntry").html("Please select");
return false;
}
});
});

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

InformationsquelleAutor Amit Joshi

-1

J'ai modifié ton code un peu. Voici une version de travail (pour moi):

    <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>  
    <div style="color:red;" id="msg_id"></div>

<script>
    $('#everything').submit(function(e){ 
        var department = $("#msg_id");
        var msg = "Please select Department";
            if ($('#dd1').val() == "") {
                department.append(msg);
                e.preventDefault();
                return false;
            }
        });
 </script>

InformationsquelleAutor Thilina

Vous devez vous connecter pour publier un commentaire.