web-dev-qa-db-fra.com

validation de la boîte de sélection jQuery

J'ai le code suivant dans jQuery.
Je dois afficher un message de validation "Année requise" lorsque la valeur d'option de l'élément select est "0". 

<script type="text/javascript">
$(document).ready(function () {
   $("#register").validate({
       debug: true,
       rules: {
           year: {
               required: function () {
                   if ($("#year option[value='0']")) {
                       return true;
                   } else {
                       return false;
                   }
               }
           }
       },
       messages: {
           year: "Year Required",
       },
   });
})
</script>

Cochez la case

<select name="year"  id="year">
    <option value="0">Year</option>
    <option value="1">1919</option>
    <option value="2">1920</option>
    <option value="3">1921</option>
    <option value="4">1922</option>
</select>
jqueryjquery-validate
14
Tom

Étant donné que vous ne pouvez pas définir value="" dans votre première option, vous devez créer votre propre règle à l'aide de la méthode intégrée addMethod() .

jQuery:

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            year: {
                selectcheck: true
            }
        }
    });

    jQuery.validator.addMethod('selectcheck', function (value) {
        return (value != '0');
    }, "year required");

});

HTML:

<select name="year">
    <option value="0">Year</option>
    <option value="1">1955</option>
    <option value="2">1956</option>
</select>

Démo de travail: http://jsfiddle.net/tPRNd/

Réponse d'origine: (Uniquement si vous pouvez définir value="" dans la première option)

Pour valider correctement un élément select avec le plug-in jQuery Validate, il suffit que la première option contienne value="". Supprimez donc le 0 de value="0" et il est corrigé.

jQuery:

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            year: {
                required: true,
            }
        }
    });

});

HTML:

<select name="year">
    <option value="">Year</option>
    <option value="1">1955</option>
    <option value="2">1956</option>
</select>

Démo: http://jsfiddle.net/XGtEr/

41
Sparky

Pour mettre une règle d'exigence sur une liste de sélection, il vous suffit de une option avec une valeur vide

<option value="">Year</option>

alors il suffit d'appliquer simplement nécessaire

<script>
    $(function () {
        $("form").validate();
    });
</script>

avec forme

<form>
<select name="year" id="year" class="required">
    <option value="">Year</option>
    <option value="1">1919</option>
    <option value="2">1920</option>
    <option value="3">1921</option>
    <option value="4">1922</option>
</select>
<input type="submit" />
</form>

le violon est ici

9
Dr Blowhard

Jquery Select Box Validation. Vous pouvez envoyer un message d’alerte par alerte ou mettre le message dans Div selon vos besoins.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message"></div>
<form method="post">
<select name="year"  id="year">
    <option value="0">Year</option>
    <option value="1">1919</option>
    <option value="2">1920</option>
    <option value="3">1921</option>
    <option value="4">1922</option>
</select>
<button id="clickme">Click</button>
</form>
<script>
$("#clickme").click(function(){

if( $("#year option:selected").val()=='0'){

alert("Please select one option at least");

  $("#message").html("Select At least one option");

}


});

</script>

1
Anil chhabra

http://docs.jquery.com/Plugins/Validation/Methods/required

éditez le code pour 'select' comme ci-dessous pour rechercher une valeur 0 ou une valeur nulle dans la liste de sélection

case 'select':
var options = $("option:selected", element);
return (options[0].value != 0 && options.length > 0 && options[0].value != '') && (element.type == "select-multiple" || ($.browser.msie && !(options[0].attributes['value'].specified) ? options[0].text : options[0].value).length > 0);
1
Anish Mathew

simplifiez un peu le tout, corrigez quelques problèmes avec des virgules qui feront exploser certains navigateurs:

  $(document).ready(function () {
       $("#register").validate({
           debug: true,
           rules: {
               year: {
                   required: function () {
                       return ($("#year option:selected").val() == "0");
                   }
               }
           },
           messages: {
               year: "Year Required"
           }
       });
   });

En passant à une hypothèse, votre sélection ne devrait-elle pas avoir cet attribut validate="required:true"?

0
Mark Schultheiss