如何在Kendo Grid弹出窗口中添加自定义验证

Question

如何将最小长度验证添加到文本框并显示自定义错误消息？

欲用于以下验证：

• 用户名具有6
• 密码的最小长度和确认密码来匹配
• 地址1需要

下面是代码为弹出式模板。模板中指定的最小长度不起作用，但最大长度工作正常。

<script id="popup_editor" type="text/x-kendo-template"> 
    <table cellpadding="0" cellspacing="0"> 
     <tr> 
      <td> 
       <label for="UserName"><b>UserName*</b></label> 
      </td> 
      <td> 
       <div class="control-row"> 
        <input type="text" 
          name="UserName" 
          id="UserName" 
          class="k-input k-textbox" 
          required 
          **minLength**="6" 
          maxlength="8" 
          pattern="[a-zA-Z0-9]+" 
          validationMessage="Please enter username"/> 
        <span class="k-invalid-msg" data-for="UserName" ></span> 
       </div> 
      </td> 
      <td></td> 
      <td></td> 
     </tr> 
     <tr> 
      <td> 
       <div> 
        <label for="Password"><b>Password*</b></label> 
       </div> 
      </td> 
      <td> 
       <div class="k-edit-label"> 
        <input type="password" 
          id="Password" 
          name="Password" 
          class="k-input k-textbox"required 
          validationMessage="Please enter Password"/> 
        <span class="k-invalid-msg" data-for="Password"></span> 
       </div> 
       </td> 
       <td> 
        <div> 
         <label for="ConfirmPassword" style=""><b>Confirm Password</b></label> 
        </div> 
       </td> 
       <td> 
        <div class="k-edit-label"> 
         <input type="password" 
          id="ConfirmPassword" 
          name="ConfirmPassword" 
          class="k-input k-textbox"required 
          validationMessage="Please enter Confirm Password"/> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <div> 
         <label for="Company_Name"><b>Company Name*</b></label> 
        </div> 
       </td> 
       <td> 
        <div class="k-edit-label"> 
         <input name="Company_Name" 
          id="Company_Name" 
          required 
          pattern="[a-zA-Z0-9]+" 
          validationMessage="Please enter Valid CompanyName"/> 
        </div> 
       </td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <td> 
       <div> 
        <label for="First_Name"><b>First Name*</b></label> 
       </div> 
       </td> 
       <td> 
        <div class="k-edit-label"> 
         <input type="text" 
          name="First_Name" 
          id="First_Name" 
          data-type="string" 
          data-bind="value:First_Name" 
          class="k-input k-textbox" required 
          pattern="[a-zA-Z]+" 
          validationMessage="Please enter FirstName"/> 
        </div> 
       </td> 
       <td> 
        <div> 
         <label for="Last_Name"><b>Last Name*</b></label> 
        </div> 
       </td> 
       <td> 
        <div class="k-edit-label"> 
         <input type="text" 
           id="Last_Name" 
           name="Last_Name" 
           class="k-input k-textbox" required 
           pattern="[a-zA-Z]+" 
           validationMessage="Please enter LastName"/> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <div> 
         <label for="Address1"><b>Address1*</b></label> 
        </div> 
       </td> 
       <td> 
        <div class="k-edit-label"> 
         <textArea style="resize: none;" 
           rows="5" 
           cols="18" 
           name="Address1" 
           maxlength="150" 
           id="Address1" required 
           pattern="[a-zA-Z0-9]+" 
           validationMessage="Please enter Address"> 
         </textarea> 
        </div> 
       </td> 
      </tr> 
</table> 

Answer 1

您可以为网格的dataSource中的弹出编辑添加自定义验证。

var dataSource = new kendo.data.DataSource({ 
    transport: { 
     ... 
    }, 
    schema: { 
     model: { 
      id: "UserName", 
      fields: { 
       UserName: {} 
       Password: {} 
       ConfirmPassword: {} 
       Company_Name: {} 
       First_Name: {} 
       Last_Name: {} 
       Address1: { 
        validation: { 
         minLength: function (input) { 
          if (input.is("[name=UserName]")) { 
           return input.val().length >= 6; 
          } 
          return true; 
         }, 
         match: function (input) { 
          if (input.is("[name=ConfirmPassword]")) { 
           return input.val() == $("#Password").val(); 
          } 
          return true; 
         } 
        } 
       } 
      } 
     } 
    } 
}); 

有几件事情需要尊重： 验证运行为弹出式窗口中的所有输入元素，因此

1. 你只需要定义它在领域的ONE你的模型。哪一个不重要。
2. 您必须检查当前运行中检查哪个输入元素，在我的示例中执行if语句。
3. 您必须在每个规则的末尾添加return true，否则您会收到错误消息，表明您没有明确检查的每个输入。如果没有通过返回值，kendo会自动假定检查结果为错误。

每个验证规则都需要自己的验证消息，否则验证工具提示框将只显示没有任何文本的警告标识。您可以在输入元素添加它作为一个HTML属性（数据 - {验证规则} -msg），像这样：

<input type="text" 
     name="UserName" 
     id="UserName" 
     class="k-input k-textbox" 
     required 
     maxlength="8" 
     pattern="[a-zA-Z0-9]+" 
     validationMessage="Please enter username" 
     data-minLenght-msg="Username must be at least 6 characters"/> 


<input type="password" 
     id="ConfirmPassword" 
     name="ConfirmPassword" 
     class="k-input k-textbox" 
     required 
     validationMessage="Please enter Confirm Password" 
     data-match-msg="Password and confirmation must be equal"/> 

希望这有助于

Answer 2

在规则补充一点：

  match: function (input) { 
       if ((input.is('[name=\'Password\']') || input.is('[name=\'ConfirmPassword\']'))&& $('#ConfirmPassword').length !== 0) { 
        if ($('#Password').val().length > 0 && $('#ConfirmPassword').val().length > 0) { 
         if (input.is('[name=\'Password\']')) { 
          return input.val() === $('#ConfirmPassword').val(); 
         } 
         else if (input.is('[name=\'ConfirmPassword\']')) { 
          return input.val() === $('#Password').val(); 
         } 
        } 
       } 
       return true; 
      }, 
      minLength: function (input) { 
       if (input.is("[name=UserName]")) { 
        return input.val().length >= 6; 
       } 
       return true; 
      }, 
      requiredAddress: function (input) { 
       if (input.is("[name=Address1]")) { 
        return $('#Address1').val() !== '' ? false : true; 
       } 
       return true; 
      }