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:

I hope this article will help to you.