javascript - knockout form validation message -

i'd use knockout.js highlight errors on form.

currently see errors when form, want them if user press on save button. i'm try set flag true if user press on it, , use in form don't have success that. apreciate that. (or other way it) need someting on html:

<div class='liveexample' data-bind="css: {hideerrors: !hasbeensubmittedonce()"> 

and somewhere in js file:

        this.hasbeensubmittedonce = ko.observable(false);      this.save = function(){         this.hasbeensubmittedonce(true);     } 

that files

html

<div class='liveexample' data-bind="css: {hideerrors: !hasbeensubmittedonce()"> <form class="form-horizontal" role="form">     <div class="form-group">         <label class="col-sm-3 control-label">store:</label>         <div class="col-sm-3" data-bind="css: { error: storename.haserror() }">             <input data-bind='value: storename, valueupdate: "afterkeydown"' />             <span data-bind='text: storename.validationmessage'> </span>         </div>     </div>     <div class="form-group">         <label class="col-sm-3 control-label">company id:</label>         <div class="col-sm-3" data-bind="css: { error: companyid.haserror }">             <input data-bind='value: companyid, valueupdate: "afterkeydown"' />             <span data-bind='text: companyid.validationmessage'> </span>         </div>     </div>     <div class="form-group">         <label class="col-sm-3 control-label">address</label>         <div class="col-sm-3" data-bind="css: { error: address.haserror }">             <input data-bind='value: address, valueupdate: "afterkeydown"' />             <span data-bind='text: address.validationmessage'> </span>         </div>     </div>     <div class="form-group">         <label class="col-sm-3 control-label">phone:</label>         <div class="col-sm-3" data-bind="css: { error: phone.haserror }">             <input data-bind='value: phone, valueupdate: "afterkeydown"' />             <span data-bind='text: phone.validationmessage'> </span>         </div>     </div>     <div class="form-group">         <div class="col-sm-offset-3 col-sm-4">             <button class="btn btn-primary" data-bind="click: save">add store</button>         </div>     </div>  </form> 

store: company id: address phone: add store

</form> 

js

define(['knockout'], function (ko){  ko.extenders.required = function(target, overridemessage) {     //add sub-observables our observable     target.haserror = ko.observable();     target.validationmessage = ko.observable();      //define function validation     function validate(newvalue) {         target.haserror(newvalue ? false : true);         target.validationmessage(newvalue ? "" : overridemessage || "this field required");     }     validate(target());     target.subscribe(validate);     return target; };  function appviewmodel(storename, companyid, address, phone) {      this.storename = ko.observable(storename).extend({  required:"" });     this.companyid = ko.observable(companyid).extend({ required: "" });     this.address = ko.observable(address).extend({ required: "" });     this.phone = ko.observable(phone).extend({ required: ""});       this.haserror = ko.computed(function(){         return this.storename.haserror() || this.companyid.haserror();     }, this);       this.hasbeensubmittedonce = ko.observable(false);      this.save = function(){         this.hasbeensubmittedonce(true);     }  }  return appviewmodel; }); 

css file

    .form-group span {     display: inherit; }  .hideerrors .error span {     display: none; } 

i did work around , not sure better way or not.

var showerror=ko.observablearray([]);//it store show error message  ko.extenders.required = function(target, overridemessage) {  //add sub-observables our observable  target.haserror = ko.observable();  target.validationmessage = ko.observable();   //define function validation  function validate(newvalue) {     target.haserror($.trim(newvalue) ? false : true);     target.validationmessage($.trim(newvalue) ? "" : overridemessage || "this field required");   }  showerror.push(function(){validate(target());});  target.subscribe(validate);  return target; };  function appviewmodel(storename, companyid, address, phone) {  this.storename = ko.observable(storename).extend({  required:"" });  this.companyid = ko.observable(companyid).extend({ required: "xcxcx" });  this.address = ko.observable(address).extend({ required: "" });  this.phone = ko.observable(phone).extend({ required: ""});    this.haserror = ko.computed(function(){     return self.storename.haserror() || self.companyid.haserror();  }, this);    this.hasbeensubmittedonce = ko.observable(false);   this.save = function(){     ko.utils.arrayforeach(showerror(),function(func){        func();     });  }  }  ko.applybindings(new appviewmodel()); 

fiddle demo