Validate auf Blur

Question

ich ein JSFiddle erstellt haben auf meine Frage zu helfen zu demonstrieren: http://jsfiddle.net/jeffreyrswenson/CrYWn/5/

Hier ist, was ich möchte, um zu sehen:

• Nachrichten nicht, wenn Seite geladen wird angezeigt.
• Nachrichten sollten angezeigt werden, wenn die Senden-Schaltfläche gedrückt wird.
• Meldungen sollten angezeigt werden, nachdem der Eingabewert geändert wurde und der Benutzer das Element verlässt. (Tabs oder klickt zum nächsten Feld)
• Die Meldungen sollten erscheinen, nachdem der Benutzer eine Eingabe ohne Änderung gelassen hat. (Zum Beispiel ist ein Feld erforderlich und der Benutzer durchsucht das Feld, gibt aber keinen Wert ein Validierungsmeldung erscheint, wenn dies geschieht.)

Die ersten vier funktionieren wie erwartet. Ist das letzte Element möglich und wenn ja, was muss ich ändern, um dieses Verhalten zu aktivieren?

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 

Ansichtsmodell:

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

Sie müssen nur den Standard valueUpdate Option der value binding verwenden, in denen Sie zusätzliche Ereignisse angeben Ihre Eigenschaftsänderung und damit die Validierung auslösen .

So brauchen Sie nur die valueUpdate: "blur" Einstellung Ihrer Bindungen hinzuzufügen:

JSFiddle

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

Demo.

Answer 2

In meinem Fall brauchte ich den Wert, um nach der Taste zu aktualisieren, weil ich einige Felder sichtbar machte, wenn die Eingabe einen Wert hatte. Ich wollte, dass der zugrunde liegende Wert aktualisiert wird, wollte aber nicht, dass die Validierung angezeigt wird, bis der Benutzer zur nächsten Eingabe übergegangen ist.

Ein bisschen CSS und ein paar Bindungen ist, was für mich gearbeitet:

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> 

Knockout:

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

Das Ergebnis ist eine Beobachtung ble, die den Wert nach dem Hochladen aktualisiert und die Überprüfungsmeldung anzeigt, nachdem sie den Fokus verloren hat.