How can I Add Custom Validation in Kendo Grid Popup

Question

How can I add validation for minimum length to a Textbox and display custom error messages?

I want validation for the following:

• UserName to have a minimum length of 6
• Password and Confirm Password to match
• Address1 is required

Here is the code for the popup template. The specified minlength in the template is not working but the maxlength is working properly.

<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

In rules add this:

          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;
            }

Answer 2

You can add custom validation for popup editing within the dataSource of your grid.

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;
                        }
                    }
                }
            }
        }
    }
});

There are a few things to respect: The validation runs for ALL input elements within your popup, therefore

1. you only have to define it for ONE of the fields in your model. Which one does not matter.
2. you have to check which input element is checked in the current run, which does the if statement in my example.
3. you have to append a return true at the end of each and every rule you define or otherwise you'll get an error message for every input you're not explicitly checking. If there's no return value passed, kendo automatically assumes the check had a false result.

Every validation rule needs its own validation message or otherwise your validation tooltip box will only display a warning logo without any text. You can add it as an html attribute (data-{validation rule}-msg) in your input elements, like this:

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

Hope this helps