Frage Wie kann select2 mit jquery.validation plugin funktionieren?


Ich versuche, select2 Feld mit jquey.validation Plugin zu validieren, aber nichts passiert.

Ich möchte das gewünschte Feld auswählen.

Ich verwende diese benutzerdefinierte Validierungsfunktion:

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

und das ist die Regel:

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

Welches select2-Feld sollte ich für die Übereinstimmung der Regel verwenden?

Ich schätze jede Idee, select2 mit jquery.validation zusammenarbeiten zu lassen

10x


23
2018-05-23 09:07


Ursprung


Antworten:


Einfach hinzufügen ignore: [], in Ihrer Formularvalidierungsfunktion. Es aktiviert die Validierung verdeckter Felder. Sie erhalten eine Validierung für Select 2

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

32
2018-04-28 12:49



Ich habe das in einem Blogpost beschrieben: http://chadkuehn.com/jquery-validate-select2/

Wenn Sie Select2 auf ein SELECT-Tag setzen, wird das ursprüngliche Element ausgeblendet. Im Validierungs-Plugin müssen Sie daher beim Hervorheben und Entmarkieren das passende Wrapping-Markup anpassen.

    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);
        }
    }

Sehen Sie sich an DEMO Hier.


14
2018-06-06 14:26



Als Tipp beachten Sie bitte, dass sich die validate js an Änderungen von select not select 2 bindet. Dieses Cause-Problem tritt im folgenden Fall auf:

  1. Da ist ein erforderlich  select box was und wird in konvertiert select2
  2. Sie klicken auf das Senden und der Fehler zeigt, dass das Auswahlfeld erforderlich ist.
  3. Sie wählen eine Option aus 2.
  4. Der Validierungsfehler wird nicht automatisch ausgeblendet

Sie können es reparieren mit:

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

8
2018-06-17 03:38



Zusätzlich zu ABIRAMAN's Antwort hier ist ein Code, der

  • Macht das select2-Feld rot, wenn Fehler auftreten
  • Listen Sie den Fehler unter dem Feld select2 auf

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

6
2017-10-26 11:40



Ich habe festgestellt, dass die Verwendung von Select2 für die Arbeit mit jQuery Validate sehr von der Markierung abhängt, die beim Erstellen des Select2-Steuerelements verwendet wird.

Für die praktischste Verwendung des Plugins werden Sie wahrscheinlich dynamisch geladene Daten verwenden (Daten, die über den Web Service vs. <option/> Elemente auf der Seite). Und nach ihrer SpezifikationDies erreichen Sie, indem Sie Select2 an eine Datei anhängen <input type="hidden"/> Element. Elemente vom type = "hidden" werden jedoch standardmäßig nicht von jQuery Validate validiert.

Um verdeckte Elemente mit jQuery Validate zu validieren, muss man an den ignore Eigenschaft in jQuery Das Konfigurationsobjekt von Validate. Siehe die ignore Option in ihrem Spez. Versuchen Sie die Initialisierung des ignore Wert als null um die Validierung auszulösen.


5
2017-10-10 14:16



Fügen Sie einfach eine Zeile in Ihre Validierungsfunktion ein.

$('#_form_id').validate({

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

3
2017-10-16 06:33



Antwort gefunden in den Foren @ https://github.com/select2/select2/issues/215 Geschrieben von Corinnaerin. Arbeitete perfekt für mich. Beispielcode bei 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'
      });

3
2018-03-29 09:49



Dies funktioniert nicht in Bootstrap Validator (), da der Validator alle Eingaben im Formular enthält. Dies bedeutet, dass das Eingabesuchfeld des select2-Plugins überprüft wird. was die Multiselect-Validierung stört

Um dies zu beheben, gehen Sie einfach zur validator.js Fügen Sie die Suchklasse select2 ein .select2-search__field zur Ignorierliste:

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

2
2018-04-06 08:06