我正在使用淘汰验证插件,它的工作正常,但我有一点问题,我想通过使用css使验证范围有点但更突出,我只想在输入元素之前插入验证范围,现在它在输入元素后的附加跨度.
这是它现在的渲染方式,
<input id="personName" class="form-control placeholder has-error" type="text" data-bind="value: name" placeholder="Your name" title="This field is required." data-orig-title="">
<span class="validationMessage" style="">This field is required.</span>
所以我只想在元素之前追加这个跨度.
我试图使用knockout验证lib来验证一个对象数组.对于如何为可观察数组形成验证组,我并不是直截了当的.我设法使其工作的唯一方法是这样(包括JSFIDDLE):
var Note = function () {
var self = this;
self.name = ko.observable().extend({ required: true });
};
var viewModel = function() {
var self = this;
self.notes = ko.observableArray([new Note(), new Note()]);
self.validatedObservables = function() {
var arr = [];
ko.utils.arrayForEach(self.notes(), function(note) {
arr.push(note.name);
});
return arr;
};
self.errors = ko.validation.group(self.validatedObservables());
self.submit = function () {
if (self.errors().length != 0) {
self.errors.showAllMessages();
}
};
};
ko.applyBindings(new viewModel());
看起来我的方法不必要地冗长.根据源代码,您只需将一个observable传递给ko.validation.group:
self.errors = ko.validation.group(self.notes());
但这不起作用.
这似乎是在绑定到输入字段时使用knockout清理/验证/格式化数据的常用方法,它创建了一个使用计算的observable的可重用自定义绑定.它基本上扩展了默认值绑定,以包括一个拦截器,它将在写入/读取之前格式化/清理/验证输入.
ko.bindingHandlers.amountValue = {
init: function (element, valueAccessor, allBindingsAccessor) {
var underlyingObservable = valueAccessor();
var interceptor = ko.computed({
read: function () {
// this function does get called, but it's return value is not used as the value of the textbox.
// the raw value from the underlyingObservable is still used, no dollar sign added. It seems like
// this read function is completely useless, and isn't used at all
return "$" + underlyingObservable();
},
write: function (newValue) {
var …比方说我有:
self.UserName = ko.observable("").extend({ required: true }).extend({ pattern: '[\S]' });
我正在尝试做类似的事情(我尝试了一些变化):
self.UserName = ko.observable("").extend({ required: true }).extend({ pattern: '[\S]', message : 'cannot contain spaces' });
但没有运气.
我可以看到验证绑定提到验证消息,但它似乎是针对所有验证的单个消息.
并且自定义验证规则似乎过度杀戮,因为我想要的只是一个模式但具有不同的消息.
我错过了一些明显的东西吗
我正在使用以下敲除验证插件:https://github.com/Knockout-Contrib/Knockout-Validation
当我点击"提交"按钮时,我想验证我的字段,而不是每当我更改输入的值时.我怎样才能做到这一点？
使用Javascript:
ko.validation.init({
insertMessages:false,
messagesOnModified:false,
decorateElement: true,
errorElementClass: 'wrong-field'
}, true);
var viewModel = {
firstName: ko.observable().extend({minLength: 2, maxLength: 10}),
lastName: ko.observable().extend({required: true}),
age: ko.observable().extend({min: 1, max: 100}),
submit: function() {
if (viewModel.errors().length === 0) {
alert('Thank you.');
}
else {
alert('Please check your submission.');
viewModel.errors.showAllMessages();
}
},
};
viewModel.errors = ko.validation.group(viewModel);
ko.applyBindings(viewModel);
HTML:
<fieldset>
<div class="row" data-bind="validationElement: firstName">
<label>First name:</label>
<input type="text" data-bind="textInput: firstName"/>
</div>
<div class="row" data-bind="validationElement: lastName">
<label>Last name:</label>
<input data-bind="value: lastName"/>
</div> …基于以下内容,我如何设置回调以显示自定义错误消息而不是默认消息？
ko.validation.rules['exampleAsync'] = {
async: true, // the flag that says "Hey I'm Async!"
validator: function (val, otherVal, callBack) { // yes, you get a 'callback'
/* some logic here */
// hand my result back to the callback
callback( /* true or false */ );
// or if you want to specify a specific message
callback( /* { isValid: true, message: "Lorem Ipsum" } */ );
},
message: 'My default invalid message'
};
是否有可能看到在敲除验证插件中是否只有一个属性有效？
我在文档中看不到任何对它的引用,只能看到整个模型是否有效.
例如,我希望计算的observable具有不同的值,具体取决于另一个observable是否有效.
Knockout验证插件是否有任何选项可以将错误类应用于错误的输入的父级或父级父级？如果没有,是否有人可以建议修改敲除验证的方法来做到这一点？
请参阅以下小提琴,了解我正在努力实现的目标.开箱即用的敲除验证设置了输入的类,但我希望它改为设置包含控件组的类:
视图
<p>Clear the field and tab out of it to "see" the current behaviour - error class is added directly to the input by knockout validation. But I want to add class "error" to control-group containing the input instead of directly to the input.</p>
<div class="form-horizontal">
<div class="control-group">
<label class="control-label">Field</label>
<div class="controls">
<input type="text" data-bind="value: testField" class="">
</div>
</div>
<button data-bind="click: setErrorOnControlGroup">Click to see desired effect</button>
</div>
使用Javascript
ko.validation.configure({
registerExtenders: true,
messagesOnModified: true,
decorateElement: true,
errorClass: 'error', …我正在使用Knockout.Validation,我希望能够显示错误摘要,其中每行显示错误消息(显然!)以及与其相关的视图模型上的字段名称,例如
到目前为止,我已经有一个validatedObservable包装我的视图模型,这会在我的viewmodel上自动放置一个errors数组,包含我的所有错误.但是我看不到任何简单的方法来检索每个错误与哪个字段相关.
我知道我可以自己遍历视图模型,从isValid属性构建我自己的错误集合 - 这是我唯一的选择吗？
一旦我有了字段名称,我就可以将我的验证摘要映射到该字段的相关"友好"标签(例如"出生日期"而不是"DateOfBirth").
这是我到目前为止的代码的简化版本:
视图模型
function PersonModel(){
var self = this;
self.Age = ko.observable().extend({ number: true});
self.DateOfBirth = ko.observable({ date: true});
self.Validate = function() {
if (!self.isValid()) {
self.errors.showAllMessages();
return false;
}
return true;
};
ko.validation.init({
grouping: { deep: true, observable: true },
registerExtenders: true,
messagesOnModified: true,
insertMessages: true
});
ko.applyBindings(ko.validatedObservable(new PersonModel()));
HTML
<ul data-bind='foreach: model().errors' class="message">
<li>
<span data-bind='text: $data'></span>
</li>
</ul>
非常感谢
目前,Knockout-Validation插件会自动将此HTML元素添加到我的网页:
<span class="validationMessage">This field is required.</span>
<span>HTML元素的位置..err我的文本框中添加一个CSS类(特别是),这样我就可以添加一个红色边框.如何通过Knockout-Validation完成？