MVC Twitter Bootstrap ненавязчивая обработка ошибок

Я пытаюсь получить ненавязчивую обработку ошибок MVC Jquery, работающую с twitter bootstrap в течение некоторого времени. Его дошло до того, что я либо собираюсь отредактировать jquery.validate, либо сделать взломать и слэш на document.ready.

Чтобы получить ненавязчивую обработку ошибок для работы с Bootstrap и MVC, мне нужно сделать так, чтобы класс "error" был добавлен в класс "control-group". Кроме того, класс "ошибка" добавляется к вводу.

Мне было интересно, нашел ли кто-нибудь в сообществе решение.

Например

Типичная разметка бутстрапа будет выглядеть так...

<div class="control-group">
    <label for="Username">Username</label>
    <div class="controls">
        <input data-val="true" data-val-required="Username is required" id="Username" name="Username" type="text" value="" />
        <span class="field-validation-valid" data-valmsg-for="Username" data-valmsg-replace="true"></span>
    </div>
</div>

Что должно произойти, при размывании, когда jquery.validate ненавязчивые пожары... он изменится на следующие

<div class="control-group error">
    <label for="Username">Username</label>
    <div class="controls">
        <input data-val="true" data-val-required="Username is required" id="Username" name="Username" type="text" value="" />
        <span class="field-validation-valid help-inline" data-valmsg-for="Username" data-valmsg-replace="true"></span>
    </div>
</div>

Чтобы заставить это работать на postback/submit, вы можете сделать следующее...

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

    $('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');
                }
            });
        }
    });


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

});

Однако при размытии он не будет работать так, как вы ожидали. Я не хочу редактировать файлы bootstrap CSS или Jquery.validate, поскольку они, скорее всего, выведут обновление в какой-то момент.

Будет ли я создавать делегат или связывать функции jquery и работать оттуда. Это глубокий JS-код, с которым я не знаком, но мог со временем перегонять мой путь через него.

Кто-нибудь знает, с чего я начну с этой проблемы, или знаю, где она была реализована/обсуждалась?

Ответы

Ответ 1

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

Наконец, это зафиксировало это для меня. Надеюсь, это поможет и другим людям...

Мой последний JS закончился так.

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

    $('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');
                }
            });
        }
    });


    $('form').each(function () {
        $(this).find('div.control-group').each(function () {
            if ($(this).find('span.field-validation-error').length > 0) {
                $(this).addClass('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");
        }
    });
} ();

Ответ 2

Здесь хорошее решение...

Добавьте это в свой _Layout.cshtml файл вне jQuery(document).ready():

<script type="text/javascript">

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('.control-group').removeClass('success').addClass('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('.control-group').removeClass('error').addClass('success');
        }
    }
});

</script>

Добавьте это внутри $(document).ready():

$("span.field-validation-valid, span.field-validation-error").addClass('help-inline');
$("div.control-group").has("span.field-validation-error").addClass('error');
$("div.validation-summary-errors").has("li:visible").addClass("alert alert-block alert-error");

Вы хорошо пойдете.

Кодовые фрагменты взяты из:

Twitter стили проверки Bootstrap с помощью ASP.NET MVC

Интеграция Bootstrap Устранение ошибок с помощью MVC Ненавязчивая проверка ошибок

@daveb answer

Ответ 3

В дополнение к answer, предоставленному @leniel-macaferi, я использую следующее как функцию $(document).ready():

$(function () {
    $("span.field-validation-valid, span.field-validation-error").addClass('help-inline');
    $("div.control-group").has("span.field-validation-error").addClass('error');
    $("div.validation-summary-errors").has("li:visible").addClass("alert alert-block alert-error");
});

Это также устанавливает класс "ошибка" в контрольной группе, если проверка на стороне сервера не удалась в сообщении формы и формально упрощает сводку проверки достоверности как предупреждение об ошибке начальной загрузки.

Ответ 4

Я знаю, что это старомодно, но я решил поделиться своим ответом на обновление для Bootstrap 3. Я немного поцарапал себе голову, прежде чем строить поверх решения, данного Leniel Macaferi.

В дополнение к изменению кланов, чтобы отразить Bootstrap 3, я подумал, что было бы приятным прикосновением представить пользователю глификон для представления состояния поля.

(function ($) {
var defaultOptions = {
    errorClass: 'has-error has-feedback',
    validClass: 'has-success has-feedback',
    highlight: function (element, errorClass, validClass) {
        var _formGroup = $(element).closest(".form-group");
        _formGroup
            .addClass('has-error')
            .removeClass('has-success');

        if (!_formGroup.hasClass("has-feedback")) {
            _formGroup.addClass("has-feedback");
        }

        var _feedbackIcon = $(element).closest(".form-group").find(".glyphicon");
        if (_feedbackIcon.length) {
            $(_feedbackIcon)
                .removeClass("glyphicon-ok")
                .removeClass("glyphicon-remove")
                .addClass("glyphicon-remove");
        }
        else {
            $("<span class='glyphicon glyphicon-remove form-control-feedback' aria-hidden='true'></span>")
                .insertAfter(element);
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        var _formGroup = $(element).closest(".form-group");
        _formGroup
            .removeClass('has-error')
            .addClass('has-success');

        if (!_formGroup.hasClass("has-feedback")) {
            _formGroup.addClass("has-feedback");
        }

        var _feedbackIcon = $(element).closest(".form-group").find(".glyphicon");
        if (_feedbackIcon.length) {
            $(_feedbackIcon)
                .removeClass("glyphicon-ok")
                .removeClass("glyphicon-remove")
                .addClass("glyphicon-ok");
        }
        else {
            $("<span class='glyphicon glyphicon-ok form-control-feedback' aria-hidden='true'></span>")
                .insertAfter(element);
        }
    }
};

$.validator.setDefaults(defaultOptions);

$.validator.unobtrusive.options = {
    errorClass: defaultOptions.errorClass,
    validClass: defaultOptions.validClass,
};

})(jQuery);

Ответ 5

Попробуйте использовать этот плагин, который я сделал https://github.com/sandrocaseiro/jquery.validate.unobtrusive.bootstrap

То, что я делал иначе, чем другие ответы, заключалось в том, чтобы переопределить методы errorPlacement и success из validate.unobtrusive с моими собственными реализациями, но без удаления исходной реализации, так что ничего не сломается.

Моя реализация выглядит так:
erroPlacement:

function onError(formElement, error, inputElement) {
    var container = $(formElement).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
        replaceAttrValue = container.attr("data-valmsg-replace"),
        replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null;

    //calling original validate.unobtrusive method
    errorPlacementBase(error, inputElement);

    if (replace) {
        var group = inputElement.parent();
        if (group.hasClass('form-group')) {
            group.addClass('has-error').removeClass('has-success');
        }
        group = group.parent();
        if (group.hasClass('form-group')) {
            group.addClass('has-error').removeClass('has-success');
        }
    }
}

успех:

function onSuccess(error) {
    var container = error.data("unobtrusiveContainer");

    //calling original validate.unobtrusive method
    successBase(error);

    if (container) {
        var group = container.parent();
        if (group.hasClass('form-group')) {
            group.addClass('has-success').removeClass('has-error');
        }
        group = group.parent();
        if (group.hasClass('form-group')) {
            group.addClass('has-success').removeClass('has-error');
        }
    }
}

Ответ 6

Из коробки я хотел размыть, чтобы поднять мою проверку правильности. Я обнаружил, что это не так с Jquery Unobtrusive. Казалось, что это сработало, если у вас был выбран вход, но не на ввод типа текста. Чтобы обойти это для меня, возможно, его неуклюжий, но я использовал следующее.

$(function () {
    $("input[type='text']").blur(function () {
        $('form').validate().element(this);
    });
});

Вы можете изменить, он просто включен на некоторых входах, которые имеют определенный класс css.

$(function () {
    $(".EnableOnblurUnobtrusiveValidation").blur(function () {
        $('form').validate().element(this);
    });
});

EnableOnblurUnobtrusiveValidation... немного длинное имя, но вы получаете jist.

Ответ 7

Используйте TwitterBootstrapMvc.

Он автоматически берет на себя атрибуты проверки ненавязчивости и все, что вам нужно написать, чтобы получить полную группу управления с меткой, ввод и проверку:

@Html.Bootstrap().ControlGroup().TextBoxFor(x => x.Field)

Удачи!