Question

I am using knockout.js and knockout.validation plugin. I have a search form which contains 3 input fields for Name, Date and Country. I want to make sure that user must have fill at least 1 field before continuing search. For this reason i applied native validation rule required on all 3 fields. Here’s my code :

function SearchModel() {
    var self = this;

    self.Name = ko.observable().extend({ required: true });
    self.Date = ko.observable().extend({ required: true });
    self.Country = ko.observable().extend({ required: true });
    self.Errors = ko.validation.group(self);
}

I created a Errors property also which contains all validation messages if validation fails. Now when user submit the search form and if validation fails i don’t want to show all the error message below input fields instead i want to show a single message on the top of the form something like “You must have enter at least one filter for search”.

So my question is how can i hide all the messages and display a single message at the top of the form? Or if there is any other better way to do the same which i am trying to do than please let me know?

Answer 1

Instead of setting each field to required, use a conditional to determine if one attribute has been provided.

function SearchModel() {
    var self = this;

    self.Name = ko.observable();
    self.Date = ko.observable();
    self.Country = ko.observable();
    self.Errors = ko.validation.group(self);
    self.needsMore = ko.computed(function () {
      return !(self.Name() || 
        self.Date() ||
        self.Country);
    });
}