Custom Validation

Apart from the built-in validation rules it provides, the Validator enables you to set custom validation rules.

<div id="vueapp" class="vue-app">
    <form id="ticketsForm" ref="myForm" v-kendo-validator="setup" @submit.prevent="onSubmit">
        <div>
            <label for="HireDate">Hire Date:</label>
            <kendo-datepicker id="HireDate"
                              name="HireDate"
                              style="width: 250px"
                              required="required"
                              v-model="date">
            </kendo-datepicker>
            <br />
            <span data-for='HireDate' class='k-invalid-msg'></span>
        </div>
        <br />
        <div>
            <label for="RetireDate">Retire Date:</label>
            <kendo-datepicker id="RetireDate"
                              style="width: 250px"
                              name="RetireDate"
                              required="required">
            </kendo-datepicker>
            <br />
            <span data-for='RetireDate' class='k-invalid-msg'></span>
        </div>
        <div>
            <button class="k-button k-primary" type="submit">Submit</button>
        </div>
    </form>

    <div class="status"></div>
</div>
<style>
    .k-button, .status {
        margin-top: 10px;
    }
    .k-invalid-msg {
        display: inline-block;
    }
    .invalid {
        color: red;
    }
    .valid {
        color: green;
    }
</style>
Vue.use(ValidatorInstaller);
Vue.use(DateinputsInstaller);

new Vue({
    el: '#vueapp',
    data: {
        date: null,
        setup: {
            rules: {
                greaterdate (input) {
                    if (input.is("[name='RetireDate'") && input.val() != "") {
                        var date = kendo.parseDate(input.val()),
                                            otherDate = kendo.parseDate(kendo.jQuery("[name='HireDate']").val());
                        return otherDate == null || otherDate.getTime() < date.getTime();
                    }
                    return true;
                }
            },
            messages: {
                greaterdate: 'Retire date should be greater than Hire date'
            }
        }
    },
    methods: {
        onSubmit: function (ev) {
            var validator = this.kendoValidator
            var status = kendo.jQuery('.status')
            if (validator.validate()) {
                status.text('Hooray! Your data is submitted!')
                  .removeClass('invalid')
                  .addClass('valid')
            } else {
                status.text('Oops! There is invalid data in the form.')
                  .removeClass('valid')
                  .addClass('invalid')
            }
        }
    }
})

In this article