knockout.js validation textbox highlight

Question

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.net/LvHUD/1/

What I did is:

<html xmlns="http://www.w3.org/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, Aug 27 '13 at 21:11

Bradley Trager · Answer 1 · 2013-08-27T14:24:16.190

1

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.net/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.

edited Aug 27 '13 at 14:24

answered Aug 27 '13 at 13:31

Bradley Trager

3,570
3
26
33

1

right,but i want..When a user starts to type in the texbox, the border color red should be removed.and no validation message like :This field is required.( only red highlighted) – patel Aug 27 '13 at 13:34
1

BTW for these things I use parsley.js(http://parsleyjs.org/). It does all these things and more very easily. – Bradley Trager Aug 27 '13 at 14:28

score 1 · Answer 2 · answered Aug 27 '13 at 14:05

1

Knockout 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.net/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())}" />

answered Aug 27 '13 at 14:05

epignosisx

6,152
2
30
31

thanks, cant we use ? https://github.com/Knockout-Contrib/Knockout-Validation/wiki/Configuration , here some are option < i feel errorElementclass will help here – patel Aug 27 '13 at 14:13

mhu · Answer 3 · 2013-08-27T15:22:48.837

0

You can use the validationElement binding for this (wiki):

http://jsfiddle.net/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;
}

edited Aug 27 '13 at 15:22

answered Aug 27 '13 at 14:24

mhu

17,720
10
62
93

That just your code. Check this out: http://stackoverflow.com/a/13042280/932282. I've updated the fiddle: http://jsfiddle.net/tBcRD/8/. – mhu Aug 27 '13 at 14:48
Thanks for reply, i did just 2 step : step 1 : open the link ( jsfiddle) step 2 : click on submit button and i dont get textbox border as red highted,**you did almost my job, great, but i got this issue** – patel Aug 27 '13 at 14:50
That's really a shortcoming of the validation plugin. You could call valueHasMutated() on the property, see: http://jsfiddle.net/tBcRD/10/ – mhu Aug 27 '13 at 15:22
WOW, your example working fine for me :),well, i have 10 fields on page page, do i need to write valueHasMutated() ,for every 10 fields? and does this make performance issue? and what do you suggest as best validation implement(in my case)? – patel Aug 28 '13 at 12:10
I'm afraid so. Because of this shortcoming I switched to jquery.validate.js. You could loop through all the properties of the validationModel, though. – mhu Aug 28 '13 at 13:41
I made one http://jsfiddle.net/s4HNK/ and i fill the all texbox and click on save button working fine ! then i remove values from last one, and click on save button, the red highlighted show, but also able to save data – patel Aug 29 '13 at 06:13
You forgot to include username1 and username2 in the validationModel: http://jsfiddle.net/s4HNK/1/ – mhu Aug 29 '13 at 07:20

knockout.js validation textbox highlight

3 Answers3