验证 Kendo/Angular 标签栏中的字段

Question

In this plunk 我有一个 Kendo 标签条，在第一个标签中有一些 Kendo 验证器中的字段。第一个字段是必填项，如果您在该字段外使用 Tab 键，您将看到错误消息。

有两个问题：

(1) 如果您单击 "Validate"，您将看不到该消息。 (2) 如果您跳出第二个字段，第一个字段中的错误消息就会消失。

如何进行验证？

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"
       }
  };
});

Answer 1

首先，需要在form元素上应用kendo-validator。其次，在表单元素上指定 ng-submit 而不是在 button

上指定 ng-click

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

第三，你的按钮应该是type="submit"

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

最后，您的 input 元素应该有一个 name 和 validationMessage

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

这是根据您的示例修改的working plnkr。

验证 Kendo/Angular 标签栏中的字段

Validating fields in Kendo/Angular Tabstrip

kendo-ui

angularjs