Custom Rules in Kendo Ui For Vue Validator

Question

I start using Kendo UI for Vue.

I want to use Kendo Validator Wrapper and it seems to be very simple for basic validation.

The sample provided:

<div id="vueapp" class="vue-app">
<form id="ticketsForm" ref="myForm" v-kendo-validator @submit.prevent="onSubmit">
    <input type="search"
        id="search"
        name="search"
        required
        validationMessage="Field is required"
        class="k-textbox" />
    <span class="k-invalid-msg" data-for="search"></span>

    <div>
        <button class="k-button k-primary" type="submit">Submit</button>
    </div>        
</form>

<div class="status"></div>

For custom validation Kendo provide rules in configuration section:

https://docs.telerik.com/kendo-ui/api/javascript/ui/validator/configuration/rules

... you can help me, please, to understand how I can setup custom rules with this wrapper?

Thank-you

Answer 1

You can define the validator this way - v-kendo-validator="getRules()" and return the object of the rules in the method getRules. Here is a plunked.

 getRules: function () {
              return {
                  rules: {
                      customRule1:  function (input) {

                          // all of the input must have a value
                          return kendo.jQuery.trim(input.val()) !== ''
                      },
                      customRule2: function (input) {
                          // only 'Tom' will be valid value for the username input

                          return input.val() === 'Tom'
                      }
                  },
                  messages: {
                      customRule1: 'All fields are required',
                      customRule2: 'Your UserName must be Tom'
                  }
              }
          }