Question

In this plunk我有一个Kendo Tabstrip，在第一个标签中有一些Kendo Validator中的字段。第一个字段是必填字段，如果您选择该字段，则会看到错误消息。

有两个问题：

（1）如果你点击＆＃34;验证＆＃34;你没有看到这条消息。（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，而不是在ng-click

上指定button

<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 Tabstrip中的字段

1 个答案: