Вопрос по css, validation, asp.net-mvc, twitter-bootstrap – MVC Twitter Bootstrap ненавязчивая обработка ошибок

24

Я уже некоторое время пытаюсь заставить ненавязчивую обработку ошибок MVC Jquery работать с загрузчиком Twitter. Дошло до того, что я либо собираюсь отредактировать jquery.validate, либо поработать над документом.

Чтобы заставить ненавязчивую обработку ошибок работать с Bootstrap и MVC, мне нужно сделать так, чтобы «ошибка» класс, добавленный к «контрольной группе»; учебный класс. Кроме того, «ошибка»; класс добавляется к входу.

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

Например

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

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

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

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

});

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

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

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

Просто обновляю мой пост. Это мой первый раз здесь, поэтому я прошу прощения за noobificationisms: s Adam
Где здесь вопрос? Я вижу больше запросов без кода или особых проблем! если вы можете предоставить пример того, где «ненавязчивая обработка ошибок MVC Jquery» quot; не удается с помощью Twitter начальной загрузки этот вопрос может быть ответом. rlemon

Ваш Ответ

7   ответов
6

ответ предоставлено @ 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");
});

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

Человек ... Я искал ситуацию с ошибками проверки сервера. Я видел, чтоerror класс не был добавлен к.control-group & Lt; & DIV ;. GT Вы спасли меня! :) StackOverflow НАСТОЛЬКО УДИВИТЕЛЬНЫЙ !!! Один ответ опирается на другой ... Так развивается мир.
0

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

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

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

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

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

4

что это старая версия, но я подумала, что поделюсь своим ответом на обновление для Bootstrap 3. Я довольно долго почесал голову, прежде чем опираться на решение, данное Лениэлем Макафери.

Вдобавок к изменению предложений, чтобы они отражали 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: defaultO,ptions.errorClass,
    validClass: defaultOptions.validClass,
};

})(jQuery);
спасибо за код, но он не работает, если вы отправляете с использованием ajax и частичного просмотра, можете ли вы помочь с этим?
0

TwitterBootstrapMvc.

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

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

Удачи!

стиль зависит исключительно от CSS.
Я понимаю, что вы имеете ввиду. Ошибка класса добавляется только при проверке сервера. Ну да, TwitterBootstrapMVC не поставляется вместе с javascript. Может быть, это должно ...
Стилирование отличается для валидации на стороне клиента по сравнению с тем, когда модель недействительна на стороне сервера. Я думаю тебе еще нужноstackoverflow.com/a/14650921/242520
Да, и ненавязчивая проверка MVC4 добавляет такие классы, какfield-validation-error в то время как Bootstrap имеет такие классы, какerror, TwitterBootstrapMvc добавляетerror когда он генерирует разметку (когда модель недействительна), но это только половина проверки времени.braindonor.net/blog/…
2

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

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

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");
        }
    });
} ();
Если вы переместите цикл, который ищет «действительный» поля за пределами оператора if, тогда он будет корректно выполнять удаление класса ошибок.
Код для form.submit работает хорошо, за исключением того, что он, кажется, не удаляет класс ошибки, если что-то исправлено на входе (но что-то еще все еще препятствует выполнению действия). Знаете ли вы, почему это?
10

Добавьте это к вашему_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 Error с ненавязчивой проверкой ошибок MVC

ответ @ daveb

Похожие вопросы