CODEWITHSUNDEEP
twitter-bootstrapknockout.jsknockout-validation
undefined
undefined

Reputation: 34248

Knockout validation dont display default message

I would like to make KO validation work with the bootstrap styling for validation messages.

I have it so that the bootstrap validation message is displayed when the content is invalid but it also displays the OOB KO validation message alongside.

enter image description here

Below is my code, I was expecting that data-bind="validationMessage: Name" would stop the default from being displayed but this appears not to be the case. Is there something I am missing to stop this displaying?

<div class="container">
   <form class="form-horizontal">
        <div class="control-group" data-bind="css: { success: Name.isModified() && Name.isValid(), error: Name.isModified() && !Name.isValid() }">
        <label for="inputName" class="control-label">Name</label>
        <div class="controls">
            <input type="text" id="inputName" placeholder="put something in and then clear" data-bind="value: Name, valueUpdate: 'afterkeydown'">
            <span class="help-inline" data-bind="validationMessage: Name, visible: Name.isModified() && !Name.isValid()"></span>
        </div>
    </div>
       </form>
</div>

And

function ViewModel() {
    var self = this;
    self.Name = ko.observable()
    .extend({ required: true });
    return self;
}
$(function () {
    ko.applyBindings(new ViewModel());
});

JSFiddle is here: http://jsfiddle.net/KmKa4/8/

Upvotes: 2

Views: 5005

Answers (1)

nemesv
nemesv

Reputation: 139758

Using the data-bind="validationMessage: Name" is not enough you need to set the insertMessages property to false to disable the automatic error message insertion.

You can do this when initializing the ko validation plugin with:

ko.validation.init({insertMessages: false});

Demo JSFiddle.

You can check out the other configuration options in the Cofiguration documentation.

Upvotes: 7

Related Questions