Schlagwort: validate

Wie man die Server-Validierung für Bootstrap 3 ein wenig aufhübschen kann, habe ich ja bereits erklärt.

Nun wollte ich auch schauen, dass die Client-Variante etwas _bootstrappiger_ aussieht und bin auf folgenden Beitrag gestoßen. Sehr gut finde ich, dass hier sämtliche Standardmethoden genutzt werden und das Rad nicht neu erfunden wird. Das ganze ist nur für Bootstrap 2, daher habe ich noch ein wenig dran geschraubt.

jQuery.validator.setDefaults({
    highlight: function (element, errorClass, validClass) {
        if (element.type === 'radio') {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === 'radio') {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        }
    }
});

$(function() {
    $('span.field-validation-valid, span.field-validation-error').each(function () {
        $(this).addClass('help-block');
    });
});

Im Prinzip habe ich wieder nur die CSS-Klassen angepasst und aus den Kommentaren die letzte Methode gezogen, um die Bootstrap-CSS-Klasse für die Hinweise anzufügen.
Damit das ganze auch funktioniert, muss darauf geachtet werden, dass der Code nach dem Laden der jQuery-Methoden erfolgt. Dazu habe ich in der BundleConfig.cs einfach das ScriptBundle angepasst:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
	"~/Scripts/jquery.unobtrusive*",
	"~/Scripts/jquery.validate*").Include("~/Scripts/wys.jquery.validate.bootstrap3.js"));

Ich habe die Datei bewusst mit einem Prefix versehen, denn nur mit dem Namen „jquery.validate.bootstrap3.js“ wäre die Datei vor den anderen jquery.validate-Javascript-Dateien geladen worden und hätte zu einem Javascript-Fehler geführt.