Custom validation rules and validation messages in Knockout

Question

ICSM Computer · Answer

Custom validation in Knockout.js is a super useful way to ensure data is correct
before submitting a form. Let’s explore how to build custom rules, show
validation messages, and enhance UX with real-time feedback.
To handle validation easily, use this Knockout plugin:
andlt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"andgt;andlt;/scriptandgt;
andlt;script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"andgt;andlt;/scriptandgt;
Example: Custom Email Validation
Step 1: Extend Observable with Rules
ko.validation.init({ insertMessages: true, decorateElement: true });
function ViewModel() {
  const self = this;
  self.name = ko.observable().extend({
    required: {
      message: "Name is required."
    },
    minLength: {
      params: 3,
      message: "Name must be at least 3 characters."
    }
  });
  self.email = ko.observable().extend({
    required: true,
    email: true
  });
  self.age = ko.observable().extend({
    validation: {
      validator: function (val) {
        return val andgt; 18;
      },
      message: "Age must be greater than 18.",
      params: 18
    }
  });
  self.errors = ko.validation.group(self);
  self.submitForm = function () {
    if (self.errors().length === 0) {
      alert("Form is valid!");
    } else {
      self.errors.showAllMessages();
    }
  };
}
ko.applyBindings(new ViewModel());
Step 2: HTML Form
andlt;form data-bind="submit: submitForm"andgt;
  andlt;divandgt;
    andlt;labelandgt;Name:andlt;/labelandgt;
    andlt;input data-bind="value: name" /andgt;
  andlt;/divandgt;
  andlt;divandgt;
    andlt;labelandgt;Email:andlt;/labelandgt;
    andlt;input data-bind="value: email" /andgt;
  andlt;/divandgt;
  andlt;divandgt;
    andlt;labelandgt;Age:andlt;/labelandgt;
    andlt;input type="number" data-bind="value: age" /andgt;
  andlt;/divandgt;
  andlt;button type="submit"andgt;Submitandlt;/buttonandgt;
andlt;/formandgt;
You'll now get:
Inline messages like "Name is required."Automatic red borders on invalid fieldsReal-time updates as users type
Built-In Rules
requiredmin, max, minLength, maxLengthemail, number, patternequal, notEqual
Creating Custom Rules Globally
You can define a custom validator rule and reuse it:
ko.validation.rules['startsWithA'] = {
  validator: function (val) {
    return val andand val.charAt(0).toLowerCase() === 'a';
  },
  message: 'The value must start with "A".'
};
ko.validation.registerExtenders();
Then use it:
self.username = ko.observable().extend({ startsWithA: true });
Summary
Feature
Description
.extend({ ... })
Attaches validation to an observable
ko.validation.group()
Gathers all errors into one group
errors.showAllMessages()
Displays all error messages manually
Global rules
Reusable across multiple observables
Decorators/messages
Automatically added to HTML for better UX
and

interview

Custom validation rules and validation messages in Knockout

ICSM Computer

Can you answer this question?

1 Answers

Example: Custom Email Validation

Step 1: Extend Observable with Rules

Step 2: HTML Form

Built-In Rules

Creating Custom Rules Globally

Summary

Liked By

Feature	Description
`.extend({ ... })`	Attaches validation to an observable
`ko.validation.group()`	Gathers all errors into one group
`errors.showAllMessages()`	Displays all error messages manually
Global rules	Reusable across multiple observables
Decorators/messages	Automatically added to HTML for better UX