上模糊

我創建了一個的jsfiddle幫助證明我的問題驗證：http://jsfiddle.net/jeffreyrswenson/CrYWn/5/上模糊

這是我想看到的內容：

消息不應該出現在頁面加載。
提交按鈕被按下時應顯示消息。
消息應該在輸入值改變並且用戶離開元素後出現。（選項卡或點擊下一個字段）
消息應該在用戶離開輸入而不改變的情況下出現（例如，一個字段是必需的，用戶在字段中標籤，但沒有輸入值，我想當發生這種情況時將出現驗證消息。）

正如我所期望的前四項工作。最後一項是否可能，如果是的話，我需要改變以啓用該行爲？

HTML：

<label>First name: 
<input data-bind='value: firstName' /> 
</label> 
<br/> 
<label>Last name: 
    <input data-bind='value: lastName' /> 
</label> 
<br/> 
<button type="button" data-bind='click: submit'>Submit</button> 
<br/> 
<span data-bind='text: errors().length'></span> errors

視圖模型：

var viewModel = function() { 
     ko.validation.configure({ 
      decorateElement: true, 
      registerExtenders: true, 
      messagesOnModified: true, 
      insertMessages: true, 
      parseInputAttributes: true, 
      messageTemplate: null 
     }); 

     this.firstName = ko.observable().extend({ 
      required: true 
     }); 
     this.lastName = ko.observable().extend({ 
      required: true, 
      pattern: { 
       message: 'Hey this doesnt match my pattern', 
       params: '^[A-Z0-9]+$' 
      } 
     }); 

     this.submit = function() { 
      if (this.errors().length == 0) { 
       alert('Thank you.'); 
      } else { 
       this.errors.showAllMessages(); 
      } 
     }; 
     this.errors = ko.validation.group(this); 
    };

來源

2014-01-29 Jeff

你只需要使用value binding標準valueUpdate選項，您可以指定其他事件來觸發你的財產的變化，並與驗證。

所以你只需要添加您綁定valueUpdate: "blur"設置：

<label>First name: 
    <input data-bind='value: firstName, valueUpdate: "blur"' /> 
</label> 
<br/> 
<label>Last name: 
    <input data-bind='value: lastName, valueUpdate: "blur"' /> 
</label>

演示JSFiddle。

來源

2014-01-29 07:43:06 nemesv

在我的情況下，我需要鍵值後更新的值，因爲如果輸入值有一些可見的字段。我想要更新基礎值，但不希望在用戶選中下一個輸入之前顯示驗證。

CSS和幾個綁定的一點是對我工作：

CSS：

div.validationWrapper.standard-focus.has-focus .validationMessage 
{ 
    display: none; 
}

HTML：

<div class="validationWrapper standard-focus" data-bind="css: { 'has-focus': MyObservableHasFocus() }"> 
    <input class="standard-focus" type="text" data-bind="hasFocus: MyObservableHasFocus, value: MyObservable, valueUpdate: 'afterkeydown'" /> 
</div>

淘汰賽：

self.MyObservable = ko.observable('').extend({/* Your validation here */}); 
self.MyObservableHasFocus = ko.observable(false);

結果是一個觀察者ble在鍵入後更新它的值，並在失去焦點後顯示驗證消息。

來源

2016-03-16 13:23:31 Daryl

回答

相關問題