Knockout Validation: làm thế nào để xác nhận các lĩnh vực trên nút nhấp chuột, không phải trên sự thay đổi đầu vào

Question

Tôi đang sử dụng plugin xác nhận loại trực tiếp sau đây: https://github.com/Knockout-Contrib/Knockout-Validation

Tôi muốn xác nhận các lĩnh vực của tôi khi tôi nhấp vào nút "Gửi", không phải lúc nào tôi cũng thay đổi giá trị của đầu vào. Làm thế nào tôi có thể làm điều đó?

Javascript:

ko.validation.init({ 
    insertMessages:false, 
    messagesOnModified:false, 
    decorateElement: true, 
    errorElementClass: 'wrong-field' 
}, true); 

var viewModel = { 
    firstName: ko.observable().extend({minLength: 2, maxLength: 10}), 
    lastName: ko.observable().extend({required: true}), 
    age: ko.observable().extend({min: 1, max: 100}), 
    submit: function() { 
     if (viewModel.errors().length === 0) { 
      alert('Thank you.'); 
     } 
     else { 
      alert('Please check your submission.'); 
      viewModel.errors.showAllMessages(); 
     } 
    }, 
}; 

viewModel.errors = ko.validation.group(viewModel); 

ko.applyBindings(viewModel); 

HTML:

<fieldset>  
    <div class="row" data-bind="validationElement: firstName"> 
     <label>First name:</label> 
     <input type="text" data-bind="textInput: firstName"/> 
    </div> 

    <div class="row" data-bind="validationElement: lastName"> 
     <label>Last name:</label> 
     <input data-bind="value: lastName"/> 
    </div> 

    <div class="row"> 
     <div class="row"> 
      <label>Age:</label> 
      <input data-bind="value: age" required="required"/> 
     </div> 
    </div> 
</fieldset> 

<fieldset> 
    <button type="button" data-bind='click: submit'>Submit</button> 
    &nbsp; 
</fieldset> 

này được jsfiddle tôi: http://jsfiddle.net/xristo91/KHFn8/6464/

Answer 1

Vâng, vâng các Validators làm bị sa thải khi sự thay đổi quan sát. Nhưng ... bạn có thể lừa bằng tùy chọn onlyIf của trình xác thực. Tôi đã thực hiện một cách Fiddler sample cách hoạt động.

Câu hỏi đặt ra ở đây là hơn ... làm những gì bạn muốn làm sau khi lần đầu tiên người dùng nhấp ....

Về cơ bản mẫu đặt một điều kiện onlyIf cho tất cả các xác nhận, và validateNow thể quan sát được , quyết định khi nào người xác thực nên đánh giá ... về cơ bản như bạn muốn ... trong phương thức gửi.

self.validateNow = ko.observable(false); 

các onlyIf được đánh giá trên tất cả các validator:

self.firstName = ko.observable().extend({ 
minLength: { 
    message:"minlength", 
    params: 2, 
    onlyIf: function() { 
    return self.validateNow(); 
    } 
}, 

và validateNow chỉ được thiết lập trên trình

self.submit = function() { 
self.validateNow(true); 

... Tôi cũng rearenged một chút dữ liệu-bindings , bởi vì mẫu của bạn chỉ đặt hộp màu đỏ xung quanh trên đầu vào.

Tôi đang sử dụng để tạo ra đóng cửa tôi với constructors..so mẫu không giống "architecure" như bạn, nhưng tôi nghĩ rằng bạn sẽ undertsand nó