验证Kendo/角禁忌带中的字段

Question

在这个沉重的我有一个Kendo，在第一个选项卡中，Kendo中有一些字段。第一个字段是必需的，如果您从该字段中签出，您将看到错误消息。

有两个问题：

(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"

下面是基于您的示例修改的工作装置。