Knockout Validation: how to validate the fields on button click, not on input change

Question

I'm using the following knockout validation plugin: https://github.com/Knockout-Contrib/Knockout-Validation

I want to validate my fields when I click on the "Submit" button, not everytime when I change the input's value. How can I do that?

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>

This is my jsfiddle: http://jsfiddle.net/xristo91/KHFn8/6464/

Coquina

your jsfiddle seems to work as specified - I think you just miss some required: true – Soni

Unfortunately this is not enough :( I want to do my validations and to bind the error class on submit click, not on live change. – Coquina

well then just move the logic inside the click-handler-function and do it manually – Soni

Answer 1

Well, yes the validators do get fired when the observables change. But... you can trick'em with the onlyIf Option of the validators. I made a Fiddler sample how it could work .

The question here is more... what do you want to do after the first time the user clicked....

Basically the sample puts an onlyIf condition to all validators, and the validateNow observable, decides when the validators should evaluate..basically as you wanted... in the submit method.

self.validateNow = ko.observable(false);

the onlyIf gets evaluated on all validator:

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

and the validateNow only gets set on the submit

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

... I also rearenged a bit the data-bindings, because your sample only puts the red box around on of the inputs.

I'm used to create my closures with constructors..so the sample is not the same "architecure" as yours, but I think you will undertsand it

Bedding