Как добавить пользовательскую проверку в всплывающем окне Kendo Grid

Question

Как добавить подтверждение для минимальной длины в текстовое поле и отобразить собственные сообщения об ошибках?

Я хочу проверки на следующее:

• UserName иметь минимальную длину 6
• Пароль и Подтверждение пароля в соответствии
• Адрес1 требуется

Вот код для всплывающего шаблона. Указанная минимальная длина в шаблоне не работает, но maxlength работает правильно.

<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

Вы можете добавить собственную проверку для всплывающего редактирования в источнике данных вашей сетки.

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. вам нужно только определить его ОДНОГО полей в вашей модели. Что не имеет значения.
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; 
      }