Validate on Blur

knockout-validation

Solution

You just need to use the standard `valueUpdate` option of the `value` binding where you can specify additional events to trigger your property change and with that the validation.

So you just need to add the `valueUpdate: "blur"` setting on your bindings:

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

Problem

I've created a JSFiddle to help demonstrate my question: http://jsfiddle.net/jeffreyrswenson/CrYWn/5/ Here's what I'd like to see: - Messages should not appear when page loads. - Messages should appear when submit button is pushed. - Messages should appear after input value is changed and user leaves element. (Tabs or clicks to next field) - Messages should appear after user leave an input without changing.(For example a field is required and the user tabs through the field, but doesn't enter a value. I'd like the validation message to appear when this happens.) The first four work as I'd expect. Is the last item possible and if so, what do I need to change to enable that behavior? 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); }; ```

Original source