Ngăn chặn xác nhận loại trực tiếp từ đánh giá khi tải ban đầu

Question

Tôi có kiểu xem đơn giản với một vài thuộc tính bắt buộc ... Tôi muốn mỗi đầu vào tô sáng màu đỏ nếu thuộc tính tương ứng không hợp lệ, nhưng tôi không muốn làm nổi bật hiển thị khi trang được tải ban đầu ... chỉ khi giá trị thay đổi hoặc khi người dùng cố gắng lưu/tiếp tục ...

Ngay bây giờ, nó xác thực mô hình khung khi tải ban đầu vì tôi chỉ định ràng buộc dữ liệu = "css: {error: name.isValid() == false}", nhưng tôi không biết cách nào khác để làm điều này hoạt động tự động (tương tự như cách jQuery xác thực không hoạt động) ...

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

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

Bất kỳ ý tưởng về cách làm cho công việc này sẽ được đánh giá cao ... Cảm ơn!

Answer 1

Vì vậy, đây là giải pháp tôi đến với:

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

---

Và đây là đánh dấu ...

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

---

và đây là CSS

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

Answer 2

Cách tiếp cận tốt hơn là định cấu hình xác thực loại bỏ để trang trí phần tử với lớp validationElement. Này được thực hiện bằng cách thêm tùy chọn cấu hình này:

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

Click here to see a jsfiddle demonstrating this.

**** EDIT, Đáp lại bình luận TỪ Asker câu hỏi ***

Nếu bạn cần để trang trí các yếu tố phụ huynh, một giải pháp thanh lịch và tái sử dụng hơn là áp dụng ràng buộc tùy chỉnh này cho phần tử cha.

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

Và áp dụng các ràng buộc trong HTML của bạn như sau:

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

Hãy xem at this updated jsfiddle to see it in action.