Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

interview

Home Interviews Custom validation rules and validation messages in Knockout – MindStick
Ask Question

1 Answers

ICSM Computer
ICSM Computer 23 Apr 2025
Report Abuse

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:

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.min.js"></script>

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

<form data-bind="submit: submitForm">
  <div>
    <label>Name:</label>
    <input data-bind="value: name" />
  </div>

  <div>
    <label>Email:</label>
    <input data-bind="value: email" />
  </div>

  <div>
    <label>Age:</label>
    <input type="number" data-bind="value: age" />
  </div>

  <button type="submit">Submit</button>
</form>

You'll now get:

  1. Inline messages like "Name is required."
  2. Automatic red borders on invalid fields
  3. Real-time updates as users type

Built-In Rules

  1. required
  2. min, max, minLength, maxLength
  3. email, number, pattern
  4. equal, notEqual

Creating Custom Rules Globally

You can define a custom validator rule and reuse it:

ko.validation.rules['startsWithA'] = {
  validator: function (val) {
    return val && 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
advertising
Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md