jQuery Validate Required Select


146

J'essaie de valider l'élément de sélection html à l'aide du plugin jQuery Validate. J'ai mis la règle «obligatoire» à true mais elle passe toujours la validation car l'index zéro est choisi par défaut. Existe-t-il un moyen de définir une valeur vide utilisée par la règle requise?

UPD. Exemple. Imaginez que nous ayons le contrôle html suivant:

<select>
  <option value="default">Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

Je veux que le plugin Validation utilise la valeur "par défaut" comme vide.


Mettez un extrait de code pour que nous puissions vous aider.
Lee

Réponses:


213

Vous pouvez écrire votre propre règle!

 // add the rule here
 $.validator.addMethod("valueNotEquals", function(value, element, arg){
  return arg !== value;
 }, "Value must not equal arg.");

 // configure your validation
 $("form").validate({
  rules: {
   SelectName: { valueNotEquals: "default" }
  },
  messages: {
   SelectName: { valueNotEquals: "Please select an item!" }
  }  
 });

1
Vous pouvez tester le texte sélectionné au lieu de la valeur, comme ceci:$.validator.addMethod("valueNotEquals", function(value, element, arg){ return return arg != jQuery(element).find('option:selected').text(); }, "Value must not equal arg.");
Pablo SG Pacheco

11
Pour aider les futurs lecteurs: Où est dit SelectName, cela signifie la valeur de l'attribut name et non la valeur de l'attribut id. Ceci est un peu déroutant car lorsque vous travaillez dans JS, on travaille généralement avec l'id et non le nom. Voir la documentation ici : "règles (par défaut: les règles sont lues à partir du balisage (classes, attributs, données)) Type: Objet Paires clé / valeur définissant des règles personnalisées. La clé est le nom d'un élément"
Dror

239

Une solution plus simple a été décrite ici: Valider la case de sélection

Rendre la valeur vide et ajouter l'attribut requis

<select id="select" class="required">
<option value="">Choose an option</option> 
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>

11
Mais vous devez donner à votre option une valeur vide - pas toujours possible ou sage
Muleskinner

4
Cela ne devrait pas être la réponse acceptée car le poster original demande spécifiquement d'utiliser des "règles" qui sont une option qui est fournie au constructeur de validation, et non présente dans le balisage. Parfois, vous n'avez pas le luxe de modifier le balisage. (Et personnellement, je préfère simplement ne pas mettre de logique dans le balisage.)
Mason Houtz

3
@MasonHoutz c'est toujours logique dans le balisage, que la logique s'attende à value = "" ou value = "default"
billrichards


30

utiliser la règle min

définir la valeur de la première option sur 0

'selectName':{min:1}

La première valeur est fixe (il y a une logique backend par rapport à cette valeur)
SiberianGuy

9

Il vous suffit de mettre en validate[required]tant que classe de cette sélection, puis de mettre une option avec valeur = ""

par exemple:

<select class="validate[required]">
  <option value="">Choose...</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

7

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

  1. Donnez à votre balise de sélection un attribut de nom. Par exemple dans ce cas

    <select name="myselect">

  2. Au lieu de travailler avec l'attribut value = "default" dans l'option de balise, désactivez l'option par défaut ou définissez value = "" comme suggéré par Andrew Coats

    <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 d'Andrew Coats ne fonctionne que si vous n'avez qu'une seule sélection 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! :)


1
en bref, ajoutez un requiredattribut à la <select>balise et ajoutez un disabledattribut à la première <option>balise (ou à celle avec l' selectedattribut s'il y en a un)
Stephen

4

Voici l'exemple simple et compréhensible:

   <select class="design" id="sel" name="subject">
        <option value="0">- Please Select -</option>
        <option value="1"> Example1 </option>
        <option value="2"> Example2 </option>
        <option value="3"> Example3 </option>
        <option value="4"> Example4 </option>
   </select>

    <label class="error" id="select_error" style="color:#FC2727"><b> Warning : You have to Select One Item.</b></label><td>

    <input type="submit" name="sub" value="Gönder" class="">

JQuery:

jQuery(function() {  

jQuery('.error').hide(); // Hide Warning Label. 

jQuery("input[name=sub]").on("click", function() {

   var returnvalue;

   if(jQuery("select[name=subject]").val() == 0) {

        jQuery("label#select_error").show(); // show Warning 
        jQuery("select#sel").focus();  // Focus the select box      
        returnvalue=false;   

}

return returnvalue;

});
      });  // you can change jQuery with $

2
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

 <form id="myform"> 
       <select class="form-control" name="user_type">
        <option value="">Select</option>
        <option value="2">1</option>
        <option value="3">2</option>
        </select>
       </form>


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

la valeur sélectionnée sera vide


2
Bien que cet extrait de code puisse résoudre la question, inclure une explication aide vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondez à la question aux lecteurs à l'avenir, et que ces personnes pourraient ne pas connaître les raisons de votre suggestion de code. Essayez également de ne pas surcharger votre code avec des commentaires explicatifs, cela réduit la lisibilité du code et des explications!
Filnor

1

C'est simple, vous devez obtenir la valeur du champ Select et il ne peut pas être "par défaut".

if($('select').val()=='default'){
    alert('Please, choose an option');
    return false;
}

1

La solution mentionnée par @JMP a fonctionné dans mon cas avec une petite modification: j'utilise à la element.valueplace de valuedans le addmethod.

$.validator.addMethod("valueNotEquals", function(value, element, arg){
    // I use element.value instead value here, value parameter was always null
    return arg != element.value; 
}, "Value must not equal arg.");

// configure your validation
$("form").validate({
    rules: {
        SelectName: { valueNotEquals: "0" }
    },
    messages: {
        SelectName: { valueNotEquals: "Please select an item!" }
    }  
});

Il est possible que j'aie un cas particulier ici, mais je n'ai pas retracé la cause. Mais la solution de @ JMP devrait fonctionner dans des cas réguliers.


0

comment valider la sélection "qualifica" il a 3 choisir

$(document).ready(function(){

    $('.validateForm').validate({
        rules: {
            fullname: 'required',
            ragionesociale: 'required',
            partitaiva: 'required',
            recapitotelefonico: 'required',
            qualifica: 'required',
            email: {
                required: true,
                email: true
            },
        },
        submitHandler: function(form) {

            var fullname = $('#fullname').val(),
                            ragionesociale = $('#ragionesociale').val(),
                            partitaiva = $('#partitaiva').val(),
                            email = $('#email').val(),
                            recapitotelefonico = $('#recapitotelefonico').val(),
                            qualifica = $('#qualifica').val(),
                            dataString = 'fullname=' + fullname + '&ragionesociale=' + ragionesociale + '&partitaiva=' + partitaiva + '&email=' + email + '&recapitotelefonico=' + recapitotelefonico + '&qualifica=' + qualifica;

            $.ajax({
                type: "POST",
                url: "util/sender.php",
                data: dataString,
                success: function() {

                    window.location.replace("./thank-you-page.php");


                }
            });
            return false;
        }
    });

});

3
Bienvenue dans Stack Overflow! Merci pour cet extrait de code, qui pourrait fournir une aide limitée à court terme. Une explication appropriée améliorerait considérablement sa valeur à long terme en montrant pourquoi c'est une bonne solution au problème, et la rendrait plus utile aux futurs lecteurs avec d'autres questions similaires. Veuillez modifier votre réponse pour ajouter des explications, y compris les hypothèses que vous avez formulées.
Toby Speight
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.