Validation 防止在初始加载时评估淘汰验证

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

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

var foo={name:ko.observable（）.extend（{required:true}}）；

---

任何关于如何使这项工作的想法将不胜感激。。。谢谢

更好的方法是配置敲除验证，用validationElement类修饰元素。这是通过添加此配置选项来完成的：

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

****编辑，回应提问者的评论***

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

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>

名称

---

看一看

下面是我提出的解决方案：

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

---

很抱歉，为了简化我的示例，我忽略了我实际上是用“error”类来装饰父div，而不是输入元素本身，因为还有其他子/同级元素也需要更改（例如：label color和“*”span visibility），所以这对我来说不起作用，我想我找到了一个方法来完成这个。。。基本上，我在每次.extend（）调用后都会追加.isModified（false），然后检查css绑定逻辑中的.isModified（）是否正确（请参见下文…）我在答案后面追加了一个更简单、更可重用的解决方案来修饰父元素…试试看！我能够让它工作，而不必创建绑定处理程序。。。我唯一不喜欢我的解决方案的地方是，我必须手动循环查看模型属性并设置isModified（true），以便在外部对象调用.save（）时，无效但未修改的字段将显示其错误状态。

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>

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