如何在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; 
      }