knockout is not showing error message span

Question

I am using knockout validation and here is how my model looks like

function SignInViewModel() {

    var self = this;
    self.userName = ko.observable('').extend({
        required: true,
        pattern: {
            message: 'Username must be a valid email address',
            params: /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
        }
    });
    self.password = ko.observable('').extend({
        required: true
    });

    self.errors = ko.validation.group(self);
    self.login = function (e) {

        if (self.errors().length == 0) {

            $.post("/account/jsonlogin", { userName: self.userName(), password: self.password(), returnUrl: "/" })
                .done(function (result) {
                    redirect(result.redirect);
                }).error(function () {

                });
        } else {

            self.errors.showAllMessages();
        }
    }

}
ko.validation.configure({
    insertMessages: true,
    decorateElement: true,
    errorElementClass: 'error'
});
$(function () {
    ko.applyBindings(new SignInViewModel());
});

When I put an invalid email address in userName and call login by clicking my submit button then knockout appends a error message span right next to element but it's set to display none. What is the problem.

Thanks

score 0 · Answer 1 · answered Jun 26 '13 at 10:39

Are you able to reproduce your issue with this fiddle:

http://jsfiddle.net/jearles/hRa2h/

--

This works for me. You'll immediately see an error count of 2 and pressing 'Login' will display errors. Typing an invalid email show the email message.

====

HTML

<fieldset>
    <legend>User: <span data-bind='text: errors().length'></span> errors</legend>
    <label>User name: <input data-bind='value: userName'/></label><br/>
    <label>Password: <input data-bind='value: password' type="password"/></label>

</fieldset>
<button type="button" data-bind='click: login'>Login</button>

JS

ko.validation.configure({
    insertMessages: true,
    decorateElement: true,
    errorElementClass: 'error',
    messagesOnModified: false    
});

function SignInViewModel() {

    var self = this;
    self.userName = ko.observable().extend({
        required: true,
        pattern: {
            message: 'Username must be a valid email address',
            params: /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
        }
    });
    self.password = ko.observable().extend({
        required: true
    });

    self.errors = ko.validation.group(self);
    self.login = function (e) {

        if (self.errors().length == 0) {
            alert('No errors');
        } else {

            self.errors.showAllMessages(true);
        }
    }

}
$(function () {
    ko.applyBindings(new SignInViewModel());
});

@Jhon Earles I am using bootstrap in my view is there anything we should do different when using bootstrap ? — Ancient, Jun 26 '13 at 10:49
No... Bootstrap should have no impact. We use Bootstrap, Knockout and Knockout Validation together at my office. I've updated my fiddle with Bootstrap. — John Earles, Jun 26 '13 at 11:14
Actually problem was with bootstrap as i was thinking , there is a class in bootstrap `.input-append, .input-prepend ` they set `font-size:0` , this was creating problem — Ancient, Jun 26 '13 at 12:44

score 0 · Accepted Answer · answered Jun 27 '13 at 05:25

0

The problem was due to bootstrap , because bootstrap has a class

.input-append, .input-prepend {
   margin-bottom: 5px;
   font-size: 0;
    white-space: nowrap;
 }

this font-size:0 was creating problem . knockout was working fine as expected .

answered Jun 27 '13 at 05:25

Ancient

3,007
14
55
104

score 0 · Answer 3 · edited Feb 19 '15 at 18:10

0

Remove the '' from your code

self.userName = ko.observable('').extend({

in your code

The above line should be more like this:

self.userName = ko.observable().extend({

the error message will show in span tag.

edited Feb 19 '15 at 18:10

alexwlchan

5,699
7
38
49

answered Feb 19 '15 at 17:28

Saravanapandian

49
6

knockout is not showing error message span

3 Answers3