asp.net - Validation plugin with jQuery UI Dialog only firing validation once -

i have asp.net web form fields bound data model using knockoutjs. using knockout validation plugin validate.

the user has ability add multiple phone numbers application , using ui dialog prompt them. problem when validation triggered lets user know: "must enter more 2 digits", applied max property on model phone number. validation triggered once though , user can bypass hitting accept twice.

i have attached jsfiddle display problem.

<h3>phone number</h3>  <input type="button" value="add new phone" data-bind="click: addphone" /> <table> <thead>     <tr>         <th>type</th>         <th>number</th>         <th></th>         <th></th>     </tr> </thead> <tbody data-bind="foreach: phonenumbers">     <tr>         <td data-bind="text: phonenumber_phonetypename"></td>         <td data-bind="text: phonenumber_number"></td>         <td data-bind="click: $root.editphone">edit</td>         <td data-bind="click: $root.deletephone">delete</td>     </tr> </tbody> </table> <div data-bind="jqdialog: { autoopen: false, resizable: false, modal: true, title:      'phone number' },                 template: { name: 'addphonenumberdialog', data: edittingphone, 'if':    edittingphone },                 opendialog: edittingphone"></div>   <script id="addphonenumberdialog" type="text/html">     <div class="addphonenumberdialog">                         <p><span>type:</span> <asp:dropdownlist runat="server" id="ddlapplicantphonetype"    data-bind="value: phonenumber_phonetypeid, selectedtext: phonenumber_phonetypename">   </asp:dropdownlist></p>      <p><span>number:</span> <input id="txtapplicantphone" data-bind="value: phonenumber_number" class="required phoneus" /></p>                         <input type="button" class="acceptbutton" value="accept" data-bind="jqbutton: {}, click: $root.onacceptphoneedit" />     <input type="button" value="cancel" data-bind="jqbutton: {}, click: $root.oncancelphoneedit" />     </div> </script>  //custom binding initialize jquery ui dialog ko.bindinghandlers.jqdialog = { init: function (element, valueaccessor) {     var options = ko.utils.unwrapobservable(valueaccessor()) || {};      //handle disposal     ko.utils.domnodedisposal.adddisposecallback(element, function () {         $(element).dialog("destroy");     });      $(element).dialog(options); } };  //custom binding handler opens/closes dialog ko.bindinghandlers.opendialog = { update: function (element, valueaccessor) {     var value = ko.utils.unwrapobservable(valueaccessor());     if (value) {         $(element).dialog({             appendto: $('form:first'),             open: function () {                 $('.datepicker').datepicker();             }         });         $(element).dialog('open');     } else {         $(element).dialog("close");     } } };  var application = function () { var self = this; this.application_uscitizen = ko.observable(false); this.application_firstname = ko.observable('').extend({     required: true }); this.application_middlename = ko.observable(''); this.application_lastname = ko.observable('');  this.phonenumbers = ko.observablearray([]);  this.selectedphone = undefined; this.edittingphone = ko.observable(); this.addphone = function () {     self.edittingphone(new phonenumber()); } this.editphone = function (phone) {     self.selectedphone = phone;     self.edittingphone(new phonenumber().copy(phone)); } this.deletephone = function (phone) {     self.phonenumbers.remove(phone); } this.onacceptphoneedit = function () {     var editted = self.edittingphone();     if (self.selectedphone != undefined) {         self.selectedphone.copy(editted);     } else {         self.phonenumbers.push(editted);     }      self.selectedphone = undefined;     self.edittingphone(undefined); } this.oncancelphoneedit = function () {     self.selectedphone = undefined;     self.edittingphone(undefined); } };  var phonenumber = function () { var self = this; this.phonenumber_phonetypeid = ko.observable(0); this.phonenumber_phonetypename = ko.observable(''); this.phonenumber_number = ko.observable('').extend({     max: 2 });  this.copy = function (phone) {     self.phonenumber_phonetypeid(phone.phonenumber_phonetypeid())     self.phonenumber_phonetypename(phone.phonenumber_phonetypename())     self.phonenumber_number(phone.phonenumber_number());      return self; } };  var vm = new application(); ko.applybindings(vm); 

http://jsfiddle.net/bjk964/wc7vf/

the validation lib not automatic stop buttons firing, need use ko.validation.group , check if there validation errors click handler

http://jsfiddle.net/wc7vf/1/

var phonenumber = function () {     var self = this;     this.phonenumber_phonetypeid = ko.observable(0);     this.phonenumber_phonetypename = ko.observable('');     this.phonenumber_number = ko.observable('').extend({         max: 2     });      this.copy = function (phone) {         self.phonenumber_phonetypeid(phone.phonenumber_phonetypeid())         self.phonenumber_phonetypename(phone.phonenumber_phonetypename())         self.phonenumber_number(phone.phonenumber_number());          return self;     }      this.errors = ko.validation.group(this); };