knockout.js - Knockout Validation - Dont validate input when empty + evaluate when submit -

check fiddle:

http://jsfiddle.net/bhzrw01s/

i trying 2 things:

first: dont validate when field empty. know there onlyif option.. there easier?

second: need run validation when click on submit (if test fiddle, error messages pop, wont apply errorclass css)

thanks :d

css:

input.error {     color: red;     border-color: red;     } 

js:

ko.validation.configure({     insertmessages: false,     decorateelement: true,     errorelementclass: 'error',     messagesonmodified: false     });  function signinviewmodel() {      var self = this;     self.username = ko.observable().extend({         required: true     });     self.password = ko.observable().extend({         required: true     });      self.errors = ko.validation.group(self);     self.login = function (e) {          if (self.errors().length == 0) {             alert('no errors');         } else {             this.errors().foreach(function(data) {                alert(data);         });             //self.errors.showallmessages(true);         }     }  } $(function () {     ko.applybindings(new signinviewmodel()); }); 

html :

<form> <fieldset>     <legend>user: <span data-bind='text: errors().length'></span> errors</legend>     <label>user name: <input data-bind='value: username' type="text"/></label><br/>     <label>password: <input data-bind='value: password' type="password"/></label>  </fieldset> <button type="button" data-bind='click: login'>login</button> </form> 

the first solution 90% of asking. not display validation until user hits submit, or until delete populated field. once break seal (so speak), receive real time validation feedback field. solution use because how knockout validation intended behave.

http://jsfiddle.net/k08m4dfx/

    self.login = function (e) {         if (self.errors().length > 0) {             self.errors.showallmessages(true);             this.errors().foreach(function(data) {                alert(data);             });         }     } 

if reason have defer validation feedback until click, mess ismodified flag behavior want. seems little kludgy me though.

http://jsfiddle.net/zd97gjg4/

    ko.extenders.defervalidation = function (target, option) {         if (option) {             target.subscribe(function(){                 target.ismodified(false);             });         }          return target;     };      self.username = ko.observable().extend({         required: {message: 'user name required' },         defervalidation: true     });      self.password = ko.observable().extend({         required: {message: "password required" },         defervalidation: true     });