web-dev-qa-db-fra.com

Comment faire pour que select2 fonctionne avec le plugin jquery.validation?

J'essaie de valider le champ select2 en utilisant le plugin jquey.validation mais rien ne se passe.

Je veux faire sélectionner le champ requis.

J'utilise cette fonction de validation personnalisée:

$.validator.addMethod("requiredcountry", function(value, element, arg){
              return arg != value;
         }, "Value must not equal arg.");

et c'est la règle:

rules:
{
 country:
 {
         required: true,
         requiredcountry: ""
 }
}

Quel champ select2 dois-je utiliser pour que la règle corresponde?

J'apprécie toute idée de la manière dont select2 fonctionne avec jquery.validation

10x

jqueryjquery-validatejquery-select2
27
user2323711

Ajoutez simplement ignore: [], dans la fonction de validation de votre formulaire. Cela activera la validation des champs cachés.Alors vous obtiendrez une validation pour Select 2

$("#ContactForm").validate({
  ignore: [],       
  rules: {
    //Rules
  },
  messages: {
    //messages
  }
});
35
ABIRAMAN

Je l'ai détaillé dans un article de blog: http://chadkuehn.com/jquery-validate-select2/

Lorsque vous placez un Select2 sur une balise SELECT, l’élément d’origine est masqué. Ainsi, dans le plug-in de validation, vous devez ajuster le balisage d'emballage approprié lors de la mise en surbrillance et de la mise en surbrillance.

    highlight: function (element, errorClass, validClass) {
        var elem = $(element);
        if (elem.hasClass("select2-offscreen")) {
            $("#s2id_" + elem.attr("id") + " ul").addClass(errorClass);
        } else {
            elem.addClass(errorClass);
        }
    },

    unhighlight: function (element, errorClass, validClass) {
        var elem = $(element);
        if (elem.hasClass("select2-offscreen")) {
            $("#s2id_" + elem.attr("id") + " ul").removeClass(errorClass);
        } else {
            elem.removeClass(errorClass);
        }
    }

Voir une DÉMO ici.

15
Chad Kuehn

En guise d’astuce, considérez que le validate js se lie aux modifications de select not select 2. Ce problème est à l’origine du cas suivant:

  1. Il y a un requis select box qui est converti en select2
  2. Vous cliquez sur le soumettre et l'erreur indique que la zone de sélection est requise.
  3. Vous sélectionnez une option parmi 2.
  4. L'erreur de validation ne se cache pas automatiquement

Vous pouvez le réparer avec:

     $("select").on("select2:close", function (e) {  
        $(this).valid(); 
    });
8
Alireza Fattahi

En plus de la réponse d'ABIRAMAN, voici un code qui 

  • Rend la zone select2 rouge lorsque des erreurs apparaissent
  • Répertoriez l'erreur sous la zone select2
<style>
  span.error{
    outline: none;
    border: 1px solid #800000;
    box-shadow: 0 0 5px 1px #800000;
  }
</style>

<script>
 $("#form").validate({
     rules: {
       email: "required"
     },
     highlight: function (element, errorClass, validClass) {
       var elem = $(element);
       if (elem.hasClass("select2-hidden-accessible")) {
           $("#select2-" + elem.attr("id") + "-container").parent().addClass(errorClass); 
       } else {
           elem.addClass(errorClass);
       }
     },    
     unhighlight: function (element, errorClass, validClass) {
         var elem = $(element);
         if (elem.hasClass("select2-hidden-accessible")) {
              $("#select2-" + elem.attr("id") + "-container").parent().removeClass(errorClass);
         } else {
             elem.removeClass(errorClass);
         }
     },
     errorPlacement: function(error, element) {
       var elem = $(element);
       if (elem.hasClass("select2-hidden-accessible")) {
           element = $("#select2-" + elem.attr("id") + "-container").parent(); 
           error.insertAfter(element);
       } else {
           error.insertAfter(element);
       }
     }
   });

$('select').select2({}).on("change", function (e) {
  $(this).valid()
});
</script>
8
Adam

J'ai constaté que faire fonctionner Select2 avec jQuery Validate dépendait beaucoup du balisage utilisé pour créer le contrôle Select2. 

Pour une utilisation plus pratique du plugin, vous utiliserez probablement des données chargées dynamiquement (données obtenues via un service Web par rapport aux éléments <option/> statiques de la page). Et conformément à leurs spécifications , la solution consiste à attacher Select2 à un élément <input type="hidden"/>. Cependant, les éléments de type = "hidden" ne sont pas validés par jQuery Validate par défaut.

Pour valider des éléments cachés à l'aide de jQuery Validate, il faut modifier la propriété ignore dans l'objet de configuration de jQuery Validate. Voir l’option ignore dans leur spec . Essayez d’initialiser la valeur ignore à null pour que la validation se déclenche.

5
Ken

Vous avez trouvé une réponse sur les forums @ https://github.com/select2/select2/issues/215 posté par corinnaerin . A parfaitement fonctionné pour moi. Exemple de code à http://plnkr.co/edit/4QaSguIiYsJtLpuPF8Rc?p=preview

      var $select = $('select').select2({
        placeholder: 'Choose',
        allowClear: true
      });

      /*
       * When you change the value the select via select2, it triggers
       * a 'change' event, but the jquery validation plugin
       * only re-validates on 'blur'
       */
      $select.on('change', function() {
        $(this).trigger('blur');
      });

      $('#myForm').validate({
        ignore: 'input[type=hidden], .select2-input, .select2-focusser'
      });
4
Himanshu Patel

ajoutez simplement une ligne dans votre fonction de validation.

$('#_form_id').validate({

       ignore: 'input[type=hidden]',
            rules: {
                //Rules
            },
            messages: {
               //messages
            },
}
3
Nirav Thakar

Cela ne fonctionne pas dans Bootstrap Validator () car le validateur inclut toutes les entrées du formulaire .Cela signifie qu'il validera le champ de recherche d'entrée du plugin select2 . Qui interférera avec la validation multisélect.

Pour résoudre ce problème, rendez-vous simplement dans le fichier validator.js Ajoutez la classe de recherche d'entrée select2 .select2-search__field À la liste des ignorés: 

Validator.INPUT_SELECTOR = ':input:not([type="submit"], button, .select2-search__field):enabled:visible'
2
Boris Grinshpun

Lorsque vous créez une règle personnalisée, vous devez également la déclarer correctement. Puisque votre règle personnalisée dépend d'un argument, vous devez alors passer l'argument lorsque vous déclarez la règle.

rules: {
   country: {
       required: true,
       requiredcountry: "your argument here"  // <- declare the custom rule
   }
}
0
Sparky

découvrez mon code. Je résous mon problème en utilisant ces codes ... quelques codes seulement (css, jquery)

$(document).ready(function() {

  //form validations---------------------------------------------------------
  $('#sample').validate({
    ignore: [],
    errorClass: "error",
    errorElement: "span"
  });

  $("#receiver_name").select2({
    placeholder: "Receiver Name"
  });

  $("#receiver_name").select2().change(function() {
    $(this).valid();
  });
});
.error .select2-choice.select2-default,
.error .select2-choices {
  color: #a94442;
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.error:focus,
.error .select2-choice.select2-defaultLfocus,
.error .select2-choicesLfocus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
}
.select2-container .select2-choices .select2-search-field input,
.select2-container .select2-choice,
.select2-container .select2-choices,
.error {
  border-radius: 1px;
}
<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet" />

  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css" rel="stylesheet" />


</head>

<body>
  <form id='sample'>
    <select class="form-control" name="receiver_name[]" id="receiver_name" multiple required>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </form>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>


</body>

</html>

0
Robinson Legaspi
$("select.select2-me").each(function(index, el) {

    if ($(this).is("[data-rule-required]") && 
    $(this).attr("data-rule-required") == "true") {
        $(this).on('select2-close', function(e) {
            $(this).valid()
        });
    }
});

travaille pour moi.

0
Patrik Guerra

Pour valider les entrées 'select2', vous devez d'abord dire à jquery validate de prendre en compte les éléments cachés:

$.validator.setDefaults({ 
ignore: [],
});

C’est une surbrillance personnalisée/non surlignée que j’utilise pour pointer les erreurs select2 et tagit avec jquery validate:

$("#someform").validate({
        rules: {
            nazwa: {
                required: true
            },
            ilosc_w_opakowaniu: {
                required: "#czy_opakowanie_zbiorcze:checked"
            }
        },
        messages: {
            nazwa: "Musisz wypełnić pole [Nazwa]",
            ilosc_w_opakowaniu: "Musisz podać ilość produktu w opakowaniu zbiorczym",
        },

        highlight: function( element, errorClass, validClass ) {
            if ( element.type === "radio" ) {
                this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
            } else {
                $( element ).addClass( errorClass ).removeClass( validClass );
            }

            // select2
            if( $(element).hasClass('select2-hidden-accessible') ){
                dzik = $(element).next('span.select2');
                if(dzik)
                    dzik.addClass( errorClass ).removeClass( validClass );
            }

            // tagit
            dzik2 = $(element).parent().find('ul.tagit') 
            if( dzik2.length == 1 )
                dzik2.addClass( errorClass ).removeClass( validClass );

        },
        unhighlight: function( element, errorClass, validClass ) {
            if ( element.type === "radio" ) {
                this.findByName( element.name ).removeClass( errorClass ).addClass( validClass );
            } else {
                $( element ).removeClass( errorClass ).addClass( validClass );
            }

            // select2
            if( $(element).hasClass('select2-hidden-accessible') ){
                dzik = $(element).next('span.select2');
                if(dzik)
                    dzik.removeClass( errorClass ).addClass( validClass );
            }

            // tagit
            dzik2 = $(element).parent().find('ul.tagit') 
            if( dzik2.length == 1 )
                dzik2.removeClass( errorClass ).addClass( validClass );
        }
     });

Et quelques CSS:

/** select2 error hightight **/
.select2.error .select2-selection--single{
    border-color:red !important;
    color:red !important;
}

/** tagit error highlight **/
.tagit.error{
   border-color:red !important;
   color:red !important;
}
0
denesis

Vous pouvez vérifier ce lien: https://github.com/rkeshmir/select2-validation Vous trouverez ici le moyen le plus simple de valider les composants de select2. L'idée idée déclenche la validation de tous les éléments <select> dans DOM lors de leur événement de modification. De plus, j'ai ajouté les règles CSS requises pour mettre en évidence les états d'entrée et d'erreur.

0
rezKesh

J'ai résolu le problème, la solution consiste à modifier les méthodes de mise en surbrillance, de mise en surbrillance et surtout d'erreur pour chaque instance de validation. Cependant, afin de ne pas modifier chaque fichier, je mets les modifications dans le fichier jquery.validate.js

highlight: function( element, errorClass, validClass ) {
        if ( element.type === "radio" ) {
            this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
        } else {
            var elem = $(element);
            if (elem.attr('readonly') == 'readonly') {
                if (elem.hasClass("input-group-addon")) {
                   $("#" + elem.attr("id")).parent().addClass(errorClass);
                } else {
                    $( element ).addClass( errorClass ).removeClass( validClass );
                }
            } else {
                if (elem.hasClass("select2-hidden-accessible")) {
                   $("#select2-" + elem.attr("id") + "-container").parent().addClass(errorClass);
                } else {
                    $( element ).addClass( errorClass ).removeClass( validClass );
                }
            }
        }
    },
    unhighlight: function( element, errorClass, validClass ) {
        if ( element.type === "radio" ) {
            this.findByName( element.name ).removeClass( errorClass ).addClass( validClass );
        } else {
            var elem = $(element);
            if (elem.attr('readonly') == 'readonly') {
                if (elem.hasClass("input-group-addon")) {
                   $("#" + elem.attr("id")).parent().removeClass(errorClass);
                } else {
                    $( element ).addClass( errorClass ).removeClass( validClass );
                }
            } else {
                if (elem.hasClass("select2-hidden-accessible")) {
                    $("#select2-" + elem.attr("id") + "-container").parent().removeClass(errorClass);
                } else {
                    $( element ).removeClass( errorClass ).addClass( validClass );
                }
            }
        }
    },
    errorPlacement: function(error, element) {
        var elem = $(element);
        if (elem.attr('readonly') == 'readonly') {
            element = $("#" + elem.attr("id")).parent();
            error.insertAfter(element);
        } else {
            if (elem.hasClass("select2-hidden-accessible")) {
                element = $("#select2-" + elem.attr("id") + "-container").parent().parent().parent();
                error.insertAfter(element);
            } else {
                error.insertAfter(element);
            }
        }
    }
0
Marcelo Quispe Ortega