验证 Kendo/Angular Tabstrip 中的字段

Question

In this plunk 我有一个 Kendo Tabstrip，在第一个选项卡中，有一个 Kendo Validator 中的一些字段。第一个字段是必需的，如果您跳出该字段，您将看到错误消息。

有两个问题：

(1) 如果您单击“验证”，则不会看到该消息。 (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

首先，kendo-validator 需要应用于 form 元素。其次，在表单元素上指定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。