jquery - Assistance with knockout validation -

using knockout library, wrote viewmodel (largely based on online guidance), bit of validation. works perfect except...

1) validation invokes once dialog launched

2) i'd bind validation dialog button instead of input box, , have trigger when users click "add new account" button.

a link jsfiddle below. guidance can provide.

http://jsfiddle.net/9pv7x/

html

<a href="#" id="createaccount">create new account</a>   <div id="newaccount" title="new account"> <p>      <span class="ui-state-highlight" data-bind='visible: accountname.haserror, text: accountname.validationmessage'> </span> </p>   <form>   <fieldset>       <label for="name">enter account name:</label><br />     <input type="text" id="accountname" data-bind='value: accountname, valueupdate: "afterkeydown"'  />   </fieldset>   </form> </div> 

viewmodel

$("#newaccount").dialog({     autoopen: false,     width: 450,     height: 300,     modal: true,     buttons: {         "add new account": function () {             // post data             $(this).dialog("close");          },         cancel: function () {             $(this).dialog("close");         }     } });  $("#createaccount")     .click(function () {         $("#newaccount").dialog("open");     });      ko.extenders.required = function(target, overridemessage) {     target.haserror = ko.observable();     target.validationmessage = ko.observable();      function validate(newvalue) {        target.haserror(newvalue ? false : true);        target.validationmessage(newvalue ? "" : overridemessage || "this field required");     }      validate(target());     target.subscribe(validate);      return target; };  function viewmodel(account) {     this.accountname = ko.observable(account).extend({ required: "an account name required" }); }  ko.applybindings(new viewmodel()); 

cheers,

claude

you need 2 modification on code:

1. to prevent validation invoked once dialog launched remove or comment line validate(target()); . initial validation.
2. apply model binding when open dialog, don't need apply if dialog not open:

like this

open:function(){     ko.applybindings(new viewmodel()); } 

kindly check working demo