admin管理员组文章数量:1410674
I'm working with validation and I am using knockout.js (and durandal.js) for a view modal.
I want to make a textbox's border red when it's blank if I click on submit button.
When a user starts to type in the textbox, the border color red should be removed.
Code is here: /
What I did is:
<html xmlns="">
<head>
<title></title>
<script src="Scripts/knockout.debug.js"></script>
<script src="Scripts/knockout.js"></script>
<script src="Scripts/knockout.validation.debug.js"></script>
<script src="Scripts/knockout.validation.js"></script>
</head>
<body>
<input type="text" data-bind='value: username' />
<br />
<button data-bind="click: submit">Submit</button>
<div data-bind="visible: showErrors, text: errors" />
<script>
function ViewModel() {
var self = this;
self.username = ko.observable().extend({
required: true
});
self.showErrors = ko.observable(false);
self.submit = function () {
self.showErrors(true);
if (self.isValid()) {
// save data here
}
}
self.errors = ko.validation.group(self);
}
ko.validation.init({
registerExtenders: true,
messagesOnModified: true,
insertMessages: false
});
ko.applyBindings(new ViewModel());
</script>
</body>
</html>
I'm working with validation and I am using knockout.js (and durandal.js) for a view modal.
I want to make a textbox's border red when it's blank if I click on submit button.
When a user starts to type in the textbox, the border color red should be removed.
Code is here: http://jsfiddle/LvHUD/1/
What I did is:
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title></title>
<script src="Scripts/knockout.debug.js"></script>
<script src="Scripts/knockout.js"></script>
<script src="Scripts/knockout.validation.debug.js"></script>
<script src="Scripts/knockout.validation.js"></script>
</head>
<body>
<input type="text" data-bind='value: username' />
<br />
<button data-bind="click: submit">Submit</button>
<div data-bind="visible: showErrors, text: errors" />
<script>
function ViewModel() {
var self = this;
self.username = ko.observable().extend({
required: true
});
self.showErrors = ko.observable(false);
self.submit = function () {
self.showErrors(true);
if (self.isValid()) {
// save data here
}
}
self.errors = ko.validation.group(self);
}
ko.validation.init({
registerExtenders: true,
messagesOnModified: true,
insertMessages: false
});
ko.applyBindings(new ViewModel());
</script>
</body>
</html>
- Hm, not seeing any Durandal in here. May I suggest that you remove the tag and update the question? – RainerAtSpirit Commented Aug 27, 2013 at 21:11
3 Answers
Reset to default 1Knockout Validation adds to your observable two observables: isValid & isModified. You can use the isValid observable to get what you are looking for. I have modified slightly the jsfiddle provided by Bradley Trager:
http://jsfiddle/tBcRD/3/
Basically the data-bind attribute was changed as follows:
<input type="text" data-bind="value: username, valueUpdate: 'afterkeydown', css:{'error':(!username.isValid() && showErrors())}" />
You can use knockouts css binding to add an error class to your input box:
<input type="text" data-bind="value: username, css:{'error':showErrors}" />
Here is the jsFiddle: http://jsfiddle/bradleytrager/tBcRD/
Addition: If you would like it to remove the highlight when the user types, one way of doing it is by updating your observable on the key down event, and subscribing to your observable in order to remove the error messages when the observable changes: HTML:
<input type="text" data-bind="value: username, css:{'error':showErrors}, valueUpdate: 'afterkeydown'" />
JS:
self.username.subscribe(function () {
self.removeErrors();
});
self.removeErrors = function () {
self.showErrors(false);
};
I updated the jsFiddle with this functionality.
You can use the validationElement binding for this (wiki):
http://jsfiddle/tBcRD/10/
HTML:
<input type="text" data-bind="value: username, validationElement: username, valueUpdate: 'afterkeydown'" />
<br/>
<button data-bind="click: submit">Submit</button>
JS:
function ViewModel() {
var self = this;
self.username = ko.observable().extend({
required: true
});
this.validationModel = ko.validatedObservable({
username: self.username
});
self.submit = function () {
self.username.valueHasMutated();
if (this.validationModel.isValid()) {
alert("data saved");
}
}
}
ko.validation.init({
registerExtenders: true,
messagesOnModified: true,
insertMessages: false,
decorateElement: true
});
ko.applyBindings(new ViewModel());
CSS:
.validationElement {
border: 1px solid red;
}
本文标签： javascriptknockoutjs validation textbox highlightStack Overflow
版权声明：本文标题：javascript - knockout.js validation textbox highlight - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744982270a2635887.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论