Click here to Skip to main content
12,759,067 members (34,304 online)
Click here to Skip to main content
Add your own
alternative version


6 bookmarked
Posted 3 Jul 2014

Use Ajax Validation in Knockout

, 3 Jul 2014 CPOL
Rate this:
Please Sign up or sign in to vote.


In knockout we can use custom validation to validate your view models. But some time we may need to examine validation from server end. Here we will demonstrate how we can use Knockout validation with jquery  ajax and server end calling.


For quick preview check out

To perform this example we are using libraries like,

- jquery-2.1.1.js

- knockout-3.1.0.js

- knockout.validation.js

- jquery.mockjax.js     to mock our ajax calls, which is an exciting library to use for ajax mocking.

Using the code

First we will use a custom validation rule with index 'userNameUsed' like this.

- val indicates the value binded from the html DOM, and otherValue what value we expected to be.

- $.when ensures synchs ajax call, and waits inside the scope until the ajax call is finished.

- IsUsed is returned from the server, indicating if the used name is already used or not (or compare to you preferred returned object or its property.)

ko.validation.rules['userNameUsed'] = {
    //val form binded value from html, otherVale what we wanted tobe
    validator: function (val, otherVal) {       
        var isUsed;
        var json = JSON.stringify({ userName: val });
                url: '/validation/IsUserNameUsed',
                dataType: "json",
                type: "POST",
                contentType: 'application/json; charset=utf-8',
                data: json,
                async: false,
        ).then(function (data, textStatus, jqXhr) {
           isUsed = (textStatus === 'success') ? data.IsUsed : null;
        return isUsed === otherVal;         //if false error message would be shown
    message: 'This user name is already in use'

Use this validation rule into our view model like this, with other validation rules

self.userName = ko.observable('').extend({ required: true, userNameUsed: false });

as we have assigned userNameUsed: false in the view model, means we are expecting result is to be false

- if validator ajax calls data.IsUsed returns false, no error message would be shown

- if ajax call fails or data.IsUsed returned true, error message would be shown


We will find two test cases at Scripts/mock.validationPage.js to mimic our ajax call as we are not using any real server. Uncomment at list a one to test if the validation is working or not.

It would be better if we use ajax validations after basic validations like required, min, max ... etc.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Bangladesh Bangladesh
No Biography provided

You may also be interested in...


Comments and Discussions

QuestionMy 5 Pin
Govindaraj Rangaraj4-Jul-14 3:42
memberGovindaraj Rangaraj4-Jul-14 3:42 
AnswerRe: My 5 Pin
diponsust4-Jul-14 3:50
memberdiponsust4-Jul-14 3:50 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170217.1 | Last Updated 4 Jul 2014
Article Copyright 2014 by DiponRoy
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid