Плагин проверки с jQuery UI Диалоговое окно только для проверки активации

Question

У меня есть веб-форма ASP.NET с полями, привязанными к модели данных с помощью KnockoutJS. Я использую плагин проверки нокаута для проверки.

Пользователь имеет возможность добавлять несколько номеров телефонов в свое приложение, и я использую диалоговое окно пользовательского интерфейса, чтобы запросить их. Моя проблема заключается в том, что при активации проверки пользователь знает: «должно вводить более двух цифр», и я применил свойство max в моей модели для номера телефона. Проверка выполняется только один раз, и пользователь может обойти, просто нажав принять дважды.

Я приложил jsfiddle, чтобы отобразить проблему.

<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 to initialize a 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 that opens/closes the 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/

Answer 1

Либерал проверки не автоматические остановить ваши кнопки от стрельбы, вы должны использовать ko.validation.group и проверьте, есть ли какая-либо ошибка проверки из обработчика щелчка

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); 
};