CODEWITHSUNDEEP
angularjskendo-ui
ps0604
ps0604

Reputation: 1071

Validating fields in Kendo/Angular Tabstrip

In this plunk I have a Kendo Tabstrip and in the first tab some fields within a Kendo Validator. The first field is required, and if you tab out of that field you will see the error message.

There are two issues:

(1) If you click on "Validate" you don't see the message. (2) If you tab out of the second field, the error message in the first field disappears.

How to make this validation work?

HTML:

<div kendo-tab-strip="">
  <ul>
    <li class="k-state-active">Tab 1</li>
    <li>Tab 2</li>
  </ul>

  <div>
      This is Tab 1 
     <table kendo-validator="validator" k-options="validatorOptions">
        <tr>
           <td>Field 1</td>
           <td>
                <input ng-model="field1" required="" />
           </td>
        </tr>
        <tr>
           <td>Field 2</td>
           <td>
                <input ng-model="field2" />
           </td>
        </tr>
      </table>
      <button ng-click="validate()">Validate</button>
  </div>

  <div>
      This is Tab 2 
   </div>

</div>

Javascript:

var app = angular.module("KendoDemos", [ "kendo.directives" ]);
app.controller('myCtrl', function($scope) {
   $scope.validate = function(){
     if (!$scope.validator.validate()) {
        return;
      }
      alert('field is valid');
   };


  $scope.validatorOptions = {
       messages: {
             required: "This field is required"
       }
  };
});

Upvotes: 1

Views: 836

Answers (1)

kachhalimbu
kachhalimbu

Reputation: 2200

First, kendo-validator needs to be applied on form element. Second, specify ng-submit on form element instead of ng-click on button

<form kendo-validator="validator" k-options="validatorOptions" ng-submit="validate($event)">

Third, your button should be type="submit"

<button type="submit">Validate</button>

Finally , your input elements should have a name and validationMessage

name="fullname" placeholder="Full name" validationMessage="This field is required"

Here is a working plnkr modified based on your example.

Upvotes: 1

Related Questions