Example of Validation in KnockoutJS

Example of Validation in KnockoutJS

Introduction:

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. 

Description: 

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.

PhoneNumber:ko.observable().extend({
                    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 }),
            //ConfirmPassword
            viewModel.ConfirmPassword = ko.observable().extend({
                validation: {
                    validator: checkPassword,
                    message: 'Please check your password !',
                    params: viewModel.Password
                }
            })

Output:

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.

0 Comments

Leave Comment