Question

我有一个简单的视图模型，其中包含一些必需的属性...如果相应的属性无效，我希望每个输入都突出显示红色，但我不希望在最初加载页面时显示此突出显示。 ..仅当值更改或用户尝试保存/继续...

时

现在它正在验证初始加载时的视图模型，因为我正在指定data-bind =“css：{error：name.isValid（）== false}”，但我不知道其他任何方式让它动态工作（类似于jQuery不显眼的验证工作方式）......

var foo = { name: ko.observable().extend({required: true}) };

<div data-bind="css: { error: !name.isValid() }">
    <input type="text" data-bind="value: name" />
</div>

任何有关如何完成这项工作的想法都将不胜感激......谢谢！

Answer 1

更好的方法是配置knockout验证以使用validationElement类装饰元素。这是通过添加此配置选项来完成的：

ko.validation.configure({ decorateElement: true });

Click here to see a jsfiddle demonstrating this.

****编辑，回应问题的评论***

如果需要装饰父元素，更优雅和可重用的解决方案是将此自定义绑定应用于父元素。

的Javascript

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

并在HTML中应用绑定，如下所示：

<form data-bind='submit:OnSubmit'>
    <label data-bind='parentvalElement:name'>
        <span>Name</span>
        <input data-bind="value: name" />
    </label>
    <input type='submit' value='submit' />
<form>

看看at this updated jsfiddle to see it in action.

Answer 2

所以，这是我提出的解决方案：

var Foo = function()
{
    this.name = ko.observable().extend({required: true}).isModified(false);
    this.validate: function()
    {
        if (!this.isValid())
        {
            //... loop through all validated properties and set .isModified(true)
            return false;
        }
        return true;
    };
    ko.validation.group(foo);
};

var Bar = function()
{
   this.foo = new Foo();
   this.errors = ko.observableArray([]); //<-- displays errors for entire page
   this.save = function()
   {
       if (!this.foo.validate())
       {
          this.errors(ko.toJS(this.foo.errors()));
       }
   };
}

ko.applyBindings(new Bar());

这是标记...

<div data-bind="with: foo">
    <div class="control-group"
         data-bind="css: { error: name.isModified() && !name.isValid() }">
        <label class="control-label">Name<span class="help-inline">*</span></label>
        <div class="controls">
            <input type="text" class="input-block-level" placeholder="Name"
                   data-bind="value: name, event: { blur: function () { name.isModified(true); }}" />
        </div>
    </div>

    <div class="alert alert-error"
         data-bind="visible: $parent.errors().length > 0">
        <h5>Errors!</h5>
        <ul data-bind="foreach: $parent.errors()">
            <li data-bind="text: $data"></li>
        </ul>
    </div>
</div>

<button type="submit" class="btn btn-primary" data-bind="click: save">Save</button>

这是CSS

.error { color: Red; font-weight: bold; }
.help-inline { display: none; }
.error .help-inline { display: inline-block; }
.error input { border-color: Red; }

防止敲除验证评估初始负载

2 个答案: