---
title: "Example of Validation in KnockoutJS"
description: "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 i"
author: "Anonymous User"
published: 2020-11-26
updated: 2020-12-01
canonical: https://www.mindstick.com/articles/324829/example-of-validation-in-knockoutjs
category: "javascript"
tags: ["knockout.js"]
reading_time: 3 minutes
---
# Example of Validation in KnockoutJS
## [Introduction](https://www.mindstick.com/blog/359/iphone-development-introduction):
In this article we will explain how to validate form input controls using [knockoutjs](https://www.mindstick.com/articles/1564/getting-start-with-knockoutjs-in-asp-dot-net-mvc-4) or what is extend method in knockoutjs or why use extend method in knockoutjs.
## Description:
Knockout provide client-[side validation](https://www.mindstick.com/interview/33573/explain-client-and-server-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](https://www.mindstick.com/interview/1095/how-are-observer-and-observable-used)**
When we need to [implement validation](https://www.mindstick.com/interview/33761/how-use-or-implement-validation-in-mvc) rules in an observable we should use to extenders with following library.
```
```
As you can see above , ko.validation.init({ … }) function must be initialized with the options given below.
- **registerExtenders:** registers [custom validation](https://www.mindstick.com/forum/1973/custom-validation-attribute) 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 element or the template specified by messageTemplate after any element (), which uses a KO value binding with a validated field.
- **parseInputAttributes:** indicates whether to assign the [validation rules](https://www.mindstick.com/interview/34052/custom-validation-rules-and-validation-messages-in-knockout) to your ViewModel, using HTML5 validation attributes.
- **errorClass:** defines CSS class assigned to both 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](https://www.mindstick.com/forum/160059/how-to-use-the-arrow-function-as-a-constructor-function-in-javascript) 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](https://www.mindstick.com/forum/1902/password-field-in-c-sharp), 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:
 **\**
I hope this article will help to you.
---
Original Source: https://www.mindstick.com/articles/324829/example-of-validation-in-knockoutjs
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.