Проверка на выбивание: есть ли возможность применить errorElementClass к родительскому элементу ввода?

Есть ли у плагина проверки Knockout возможность применить класс ошибок к родительскому или родительскому родительскому элементу входных данных с ошибкой? Если нет, то может ли кто-нибудь предложить подход, чтобы изменить валидацию нокаута, чтобы сделать это?

Пожалуйста, посмотрите следующую скрипку для примера того, чего я пытаюсь достичь. Стандартная проверка на выбывание устанавливает класс входных данных, но я хочу вместо этого установить класс содержащей контрольную группу:

http://jsfiddle.net/fbA4m/1/

Просмотр

<p>Clear the field and tab out of it to "see" the current behaviour - error class is added directly to the input by knockout validation. But I want to add class "error" to control-group containing the input instead of directly to the input.</p>
<div class="form-horizontal">
<div class="control-group">
<label class="control-label">Field</label>
<div class="controls">
<input type="text" data-bind="value: testField" class="">
</div>
</div>
    <button data-bind="click: setErrorOnControlGroup">Click to see desired effect</button>
</div>

Javascript

ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: true,
    decorateElement: true,
    errorClass: 'error',
    insertMessages: false,
    parseInputAttributes: true,
    messageTemplate: null
});

var viewModel = {
    testField: ko.observable("123").extend({required: true}),
    setErrorOnControlGroup: function() {
        $("input.error").removeClass("error");
        $(".control-group").addClass("error");
    }
};

ko.applyBindings(viewModel);

Таблица стилей (только для иллюстрации - мне это не нужно, потому что я хочу использовать стили начальной загрузки Twitter)

/*NOTE: This is not actually the style I want, it just illustrates the default behaviour of knockout validation*/
input.error {
    background-color: #aaffaa;
}

Я спрашиваю, потому что я использую стиль начальной загрузки Twitter, и он использует родительский элемент control-group элемента input для стилизации входов "error".

7 голосов | спросил mutex 1 AMpMon, 01 Apr 2013 11:08:54 +040008Monday 2013, 11:08:54

2 ответа


0

Вы можете написать собственную привязку. Посмотрите на источник привязки validationElement в источнике проверки правильности.

ответил delixfe 2 AMpTue, 02 Apr 2013 09:40:01 +040040Tuesday 2013, 09:40:01
0

Я настроил скрипку мьютекса, чтобы добиться эффекта. http://jsfiddle.net/3vGVC/9/. Хотя есть возможности для улучшения, возможно, чтобы можно было указать класс css для применения. Вот связывание, которое можно применить к контейнеру.

ko.bindingHandlers.validationElement = {
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    var valueIsValid = valueAccessor().isValid();
    if(!valueIsValid) {
        $(element).addClass("error");
    }
    else {
        $(element).removeClass("error");
    }
}

}

ответил Toby Couchman 30 AMpTue, 30 Apr 2013 01:57:56 +040057Tuesday 2013, 01:57:56

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

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132