New to Kendo UI for jQuery? Download free 30-day trial

Add the Validator to MVVM


Product Progress® Kendo UI® Validator for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I fully integrate the Kendo UI Validator in an MVVM scenario?


To achieve the desired scenario, use the change event of the Observable and the validate method of the Validator.

<div id="example">
      <div class="demo-section k-content" data-bind="visible: confirmed">
        Thank you for your registration, <span data-bind="text: firstName"></span> <span data-bind="text: lastName"></span>
        <br /><br />
        <button data-bind="click: startOver" class="k-button k-primary">Start Over</button>
      <div class="demo-section k-content wide">
            <ul id="fieldlist">
              <li><label for="fname">First Name:</label> <input id="fname" name="fname" data-bind="value: firstName"required validationMessage="First name is required"/></li>
              <li><label for="lname">Last Name:</label> <input id="lname" name="lname" data-bind="value: lastName" required validationMessage="Last name is required"/></li>
              <li><label for="gender">Gender:</label> <select id="gender" data-role='dropdownlist' data-bind="source: genders, value: gender"></select></li>
              <li> <label for="agree">License Agreement</label> <input type="checkbox" id="agree" name="agree" data-bind="checked: agreed" required validationMessage="You should agree the licence agreement"/> I have read the licence agreement</li>
            <button id='register' data-bind="click: register" >Register</button>
            <button id='start' data-bind="click: startOver" type="button">Start Over</button>
        var kendoValidator;
        $(document).ready(function() {
          var viewModel = kendo.observable({
            firstName: "John",
            lastName: "Doe",
            genders: ["Male", "Female"],
            gender: "Male",
            agreed: false,
            confirmed: false,
            register: function(e) {
              if (kendoValidator.validate()) {
                // If the form is valid, the Validator will return true
                this.set("confirmed", true);
            startOver: function() {
              this.set("confirmed", false);
              this.set("agreed", false);
              this.set("gender", "Male");
              this.set("firstName", "John");
              this.set("lastName", "Doe");
          kendo.bind($("#example"), viewModel);
            validateOnBlur: false // Disable the default validation on blur
          // Get the Validator instance.
          kendoValidator = $("form").getKendoValidator();
          viewModel.bind("change", function(e) {
            // Validate on model change.
        .demo-section > div {
          float: left;
          margin-bottom: 2em;
        #fieldlist {
          margin: 0;
          padding: 0;
        #fieldlist li {
          list-style: none;
          padding-bottom: 1.5em;
          text-align: left;
        #fieldlist label {
          display: block;
          padding-bottom: .3em;
          font-weight: bold;
          text-transform: uppercase;
          font-size: 12px;
        .prettyprint {
          background-color: #fff;
          border: 1px solid #ccc;
          overflow: auto;
          padding: 5px;

See Also

In this article