Example of Validation in KnockoutJS

Example of Validation in KnockoutJS


In this article we will explain how to validate form input controls using knockoutjs or what is extend method in knockoutjs or why use extend method in knockoutjs. 


Knockout provide client-side validation by using extender. It notifying to user when that value changes of input fields (input, textarea, select).

The following demo Knockout validation via extender

 Code here----

Adding validation to an observable

When we need to implement validation rules in an observable we should use to extenders with following library.

   <script src="/Scripts/knockout-3.4.1.js"></script>

    <script src="/Scripts/knockout.validation.js"></script>

As you can see above , ko.validation.init({ … }) function must be initialized with the options given below. 

  • registerExtenders: registers custom validation rules defined via ko.validation.rules.
  •  messagesOnModified: indicates whether the validation messages are triggered only when the properties are modified or not at all times.
  • insertMessages: If true validation will insert either a <span> element or the template specified by messageTemplate after any element (<input>), which uses a KO value binding with a validated field.
  • parseInputAttributes: indicates whether to assign the validation rules to your ViewModel, using HTML5 validation attributes.
  • errorClass: defines CSS class assigned to both <input> and validation message elements.

When We need to add an extender, which allows an observable to be required and minLength: 2 characters and maxLength: 17 characters.

FirstName: ko.observable().extend({ required: true, minLength: 2, maxLength:17})

When We need to add an extender that allows an observable to be required and Phone Number pattern, as shown below.

                    required: true,
                    pattern: {
                        message: 'Phone Number is not vailid.',
                        params: '^06-[0-9]{2}-[0-9]{2}-[0-9]{2}-[0-9]{2}$'

When We need to add an extender that allows to compare password as show below.

  • Validator : accepts function as a parameter, which will compare the password.
  • Message : accepts the string message, which will be displayed, if the error has occurred.
  • params : provides the password field, which will be compared.

            var checkPassword = function (val, other) {
                return val == other;
            Password: ko.observable().extend({required: true }),
            viewModel.ConfirmPassword = ko.observable().extend({
                validation: {
                    validator: checkPassword,
                    message: 'Please check your password !',
                    params: viewModel.Password


Example of Validation in KnockoutJS

I hope this article will help to you.

Last updated:12/1/2020 2:56:52 AM
Aditya Patel

Aditya Patel

Hi, I am a Senior Software Developer in MindStick Software pvt. Ltd. I have done BCA from dr. c.v. Raman university. I have more than five years experience in Microsoft Technology MVC 4, MVC Core, C#,Vb.Net, rdlc Reporting ,SQL Server and other jQuery, css, Bootstrap, Knockout.js, angular.js,react.js Html, Crystal Reporting etc.


Leave Comment