knockout.js validation textbox highlight

javascript knockout.js knockout-validation

10,103

Solution 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.

Solution 2

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

10,103

Author by

patel

Updated on June 14, 2022

Comments

patel about 2 years

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>

patel almost 11 years

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 almost 11 years

thanks, cant we use ? github.com/Knockout-Contrib/Knockout-Validation/wiki/… , here some are option < i feel errorElementclass will help here
Bradley Trager almost 11 years

BTW for these things I use parsley.js(parsleyjs.org). It does all these things and more very easily.
mhu almost 11 years

That just your code. Check this out: stackoverflow.com/a/13042280/932282. I've updated the fiddle: jsfiddle.net/tBcRD/8.
patel almost 11 years

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
mhu almost 11 years

That's really a shortcoming of the validation plugin. You could call valueHasMutated() on the property, see: jsfiddle.net/tBcRD/10
patel almost 11 years

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)?
mhu almost 11 years

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.
patel almost 11 years

I made one 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
mhu almost 11 years

You forgot to include username1 and username2 in the validationModel: jsfiddle.net/s4HNK/1