Validate на размывании

Question

Я создал 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 

ViewModel:

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

Answer 1

Вам просто нужно использовать стандартный valueUpdate вариант в value binding, где вы можете указать дополнительные события, чтобы вызвать ваши изменения свойств и с тем, что проверка ,

Так что вам просто нужно добавить параметр 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> 

Demo JSFiddle.

Answer 2

В моем случае мне понадобилось значение для обновления после нажатия клавиши, потому что я делал некоторые поля видимыми, если значение ввода имело значение. Я хотел, чтобы базовое значение обновлялось, но не хотело, чтобы валидация показывалась до тех пор, пока пользователь не перечислил следующий вход.

Немного 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); 

Результатом является наблюдение который обновляет его значение после нажатия клавиши и показывает сообщение проверки после того, как он теряет фокус.