i have implemented basic required validation on "first name" largely based on example suggested on knockout website (http://knockoutjs.com/documentation/extenders.html) - live example 2: adding validation observable.
my problem don't want validation fire when form first loaded. below code
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test</title> <link href="style.css" rel="stylesheet" /> </head> <body> <p data-bind="css: { error: firstname.haserror }"> <span>first name</span> <input data-bind='value: firstname, valueupdate: "afterkeydown"' /> <span data-bind='visible: firstname.haserror, text: firstname.validationmessage'></span> </p> <p> <span>last name</span> <input type="text" data-bind="value: lastname, valueupdate: 'afterkeydown'" /> </p> <div data-bind="text: fullname" /> <script src="scripts/jquery-2.0.3.js"></script> <script src="scripts/knockout-2.3.0.debug.js"></script> <script src="script.js"></script> </body> </html> var appviewmodel = function () { var firstname = ko.observable().extend({ required: "please enter first name" }), lastname = ko.observable(), fullname = ko.computed(function () { return firstname() + " " + lastname(); }); return { firstname: firstname, lastname: lastname, fullname: fullname }; }; 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"); } //initial validation validate(target()); //validate whenever value changes target.subscribe(validate); //return original observable return target; }; var viewmodel = new appviewmodel(); ko.applybindings(viewmodel); you see demo of issue facing @ link http://jsfiddle.net/tcp62/22/``
please note jsfiddle link have provided demo showing problem - works in "chrome" , not work in ie.
please can me resolve this.
regards, ankush
just rid of following line , should want:
//initial validation validate(target()); the required extender gets called when page loads, , because contains above call, causes validation trigger immediately. next line of code target.subscribe(validate); ensures triggered when observable changes value (as stated comment). , that's need in case.
Comments
Post a Comment