带有jQuery UI对话框的验证插件只触发一次验证
我有一个ASP.NET Web表单,其中的字段使用KnockoutJS绑定到数据模型。我正在使用敲除验证插件进行验证 用户可以将多个电话号码添加到他们的应用程序中,我正在使用UI对话框提示他们。我的问题是,当触发验证时,它会让用户知道:“必须输入超过2位数字”,我在手机型号上应用了max属性作为电话号码。不过,验证只触发一次,用户只需点击两次accept即可绕过 我附加了一个JSFIDLE来显示这个问题带有jQuery UI对话框的验证插件只触发一次验证,jquery,asp.net,jquery-ui,validation,knockout.js,Jquery,Asp.net,Jquery Ui,Validation,Knockout.js,我有一个ASP.NET Web表单,其中的字段使用KnockoutJS绑定到数据模型。我正在使用敲除验证插件进行验证 用户可以将多个电话号码添加到他们的应用程序中,我正在使用UI对话框提示他们。我的问题是,当触发验证时,它会让用户知道:“必须输入超过2位数字”,我在手机型号上应用了max属性作为电话号码。不过,验证只触发一次,用户只需点击两次accept即可绕过 我附加了一个JSFIDLE来显示这个问题 <h3>Phone Number</h3> <input t
<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);
电话号码
类型
数
编辑
删除
键入:验证库不会自动停止启动按钮,您需要使用ko.validation.group并检查单击处理程序是否存在任何验证错误
JSFIDLE很好,但请在问题中也包含相关代码(这样,如果链接失效,这个问题对其他人仍然有用)。此外,如果你告诉我们你做了哪些尝试和研究,这会有所帮助。@Jeroen说得对。我已经用小提琴上的代码更新了谢谢。谢谢@Anders。这似乎起到了作用。我将对它进行更多的测试,然后标记为答案,如果一切正常。再次感谢。您还可以在“接受”按钮上添加计算和绑定“启用绑定”,以便在无效时甚至无法单击
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);
};