Using BootstrapValidator with MVC DataAnnotations

Question

I am using DataAnnotations to specify my validation rules and by default, these validation rules are added on the client side for them to be validated by jquery.

I'd like to use BootstrapValidator.js since I like the way the error/success messages get rendered. However, it requires me to redefine the validation rules on the client side. An article about BootstrapValidator.js can be found.

Is there a way I can use DataAnnotations and define the rules in a single place and still use BootstrapValidator?

Any thoughts?

Answer 1

No need to redefine validation rules again. You can simply integrate MVC type validation (which is Jquery Validation Plugin) with Bootstrap styling by dropping a quick script and reference it after your MVC validation scripts:

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

    $('.validation-summary-errors').each(function () {
        $(this).addClass('alert');
        $(this).addClass('alert-error');
        $(this).addClass('alert-block');
    });

    $('form').submit(function () {
        if ($(this).valid()) {
            $(this).find('div.control-group').each(function () {
                if ($(this).find('span.field-validation-error').length == 0) {
                    $(this).removeClass('error');
                }
            });
        }
        else {
            $(this).find('div.control-group').each(function () {
                if ($(this).find('span.field-validation-error').length > 0) {
                    $(this).addClass('error');
                }
            });
            $('.validation-summary-errors').each(function () {
                if ($(this).hasClass('alert-error') == false) {
                    $(this).addClass('alert');
                    $(this).addClass('alert-error');
                    $(this).addClass('alert-block');
                }
            });
        }
    });

    $('form').each(function () {
        $(this).find('div.control-group').each(function () {
            if ($(this).find('span.field-validation-error').length > 0) {
                $(this).addClass('error');
            }
        });
    });

    $("input[type='password'], input[type='text']").blur(function () {
        if ($(this).hasClass('input-validation-error') == true || $(this).closest(".control-group").find('span.field-validation-error').length > 0) {
            $(this).addClass('error');
            $(this).closest(".control-group").addClass("error");
        } else {
            $(this).removeClass('error');
            $(this).closest(".control-group").removeClass("error");
        }
    });
});

var page = function () {
    //Update that validator
    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest(".control-group").addClass("error");
        },
        unhighlight: function (element) {
            $(element).closest(".control-group").removeClass("error");
        }
    });
} ();