Styling-jQuery-Validation mit Select2 4.0 und Bootstrap 3+

Ich habe ein Projekt, das verwendet Bootstrap 3.3.4, Select2 4.0 und Jquery Validation 1.13.1

Habe ich die jquery-validator standardmäßig Stil bootstrap 3 Klassen wie so

 $.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-block",

    highlight: function (element, errorClass, validClass) {
    $(element).addClass(errorClass);
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    unhighlight: function (element, errorClass, validClass) {
    $(element).removeClass(errorClass);
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    },

    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
           error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }

    }
});

Aber diese Vorgabe nicht Stil select2 Felder das gleiche... in dem Bild unten, die "Metalle" auswählen, wird ein bootstrap-Feld, während die "Farben" wählen Sie ein select2 Feld.

Styling-jQuery-Validation mit Select2 4.0 und Bootstrap 3+

Ich habe versucht, die Suche anderen SO ist , aber alle diese nutzen die 3.5.xx version select2

Habe ich ein jsfiddle Beispiel-Bild, ich bin auf der Suche nach Anpassungen der validator standardmäßig haben select2 einheitliche Aussehen

http://jsfiddle.net/z49mb6wr/

  • Select2 hat ein Bootstrap-theme die Sie verwenden können.
  • Danke @KevinBrown , ich Tat umzusetzen, sowie die änderung der jquery Validierung in Verzug, funktioniert Super jetzt
InformationsquelleAutor Jay Rizzi | 2015-06-11
  1. 24

    Ich habe versucht, die Suche anderen SO ist, aber alle diese nutzen die 3.5.xx version select2

    Es gibt keine geheime Formel für verschiedene Versionen;, die Sie gerade haben, um es herauszufinden für Ihre situation. Das bedeutet, dass Sie prüfen müssen die gerenderten DOM, so dass Sie wissen, welche Elemente zu Ziel, und wie für diese Zielgruppe zu tun.

    Ich behaupte nicht, dass der folgende code wird für Sie arbeiten; es ist nur ein Beispiel, wie man Angriffe auf diese situation.

    1. CSS schreiben, dass die Ziele der gerenderten Select2 element. Also immer dann, wenn der übergeordnete container hat die Klasse has-error, das Select2-element gestaltet werden als solch.

      .has-error .select2-selection {
    border: 1px solid #a94442;
    border-radius: 4px;
}

    2. Bekommen die Fehlermeldung angezeigt nach das Select2-element einfach eine weitere bedingte innerhalb der errorPlacement option zusammen mit einigen jQuery-DOM-traversal.

      errorPlacement: function (error, element) {
    if (element.parent('.input-group').length) { 
        error.insertAfter(element.parent());      //radio/checkbox?
    } else if (element.hasClass('select2')) {     
        error.insertAfter(element.next('span'));  //select2
    } else {                                      
        error.insertAfter(element);               //default
    }
}

    3. Und schließlich, da die Interaktion mit der Select2 keine Ereignisse, die das jQuery Validate plugin automatisch erfasst, Sie haben so schreiben Sie einen benutzerdefinierten event-handler und programmgesteuert auslösen der Validierung.

      $('.select2').on('change', function() {
    $(this).valid();
});

    Arbeiten DEMO: http://jsfiddle.net/z49mb6wr/1/

    • danke, lernten viel Recht dort
    • für einen anderen Fall oder eine neuere version dies funktioniert if (element.hasClass("select2-hidden-accessible")) { error.insertAfter(element.next('span.select2')); }
    • wunderbar! funktioniert perfekt
    InformationsquelleAutor Sparky
  2. 2

    Sparky ' s beantworten, nur für mich nicht funktioniert, also habe ich es geändert, um die folgenden:

    if (element.hasClass('select2-hidden-accessible')) {
    error.insertAfter(element.closest('.has-error').find('.select2'));
} else if (element.parent('.input-group').length) { 
    error.insertAfter(element.parent());
} else {                                      
    error.insertAfter(element);
}
    InformationsquelleAutor adamj
  3. 2

    Einer kleinen änderung @Sparky ' s Lösung - I don ' T nehmen den Kredit, außer, um herauszufinden, dass error und valid Klassen benutzt werden, durch neueste jquery validate(:P), da auf Datum:

    /*! jQuery Validation Plugin - v1.16.0 - 12/2/2016
 * http://jqueryvalidation.org/
 * Copyright (c) 2016 Jörn Zaefferer; Licensed MIT */

    Nun-code:

    $('#MyForm').validate({
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) { 
            error.insertAfter(element.parent());      //radio/checkbox?
        } else if (element.hasClass('select2-hidden-accessible')) {     
            error.insertAfter(element.next('span'));  //select2
            element.next('span').addClass('error').removeClass('valid');
        } else {                                      
            error.insertAfter(element);               //default
        }
    }
});

//add valid and remove error classes on select2 element if valid
$('.select2-hidden-accessible').on('change', function() {
    if($(this).valid()) {
        $(this).next('span').removeClass('error').addClass('valid');
    }
});

    Den Einsatz von CSS auf error Klasse, wie es dir gefällt.

    • ok, schlecht nehmen Sie einen Blick auf diese, wie Funkgeräte funktionieren nicht in der ursprünglichen Antwort
    • wenn Sie können auch eine Probe Ihres HTML-Codes für radios, wird es leichter sein, um zu sehen, warum es nicht für Sie arbeiten.
    InformationsquelleAutor Fr0zenFyr
Schreibe einen Kommentar