Forms Support

The forms supports enables you to validate input values and prevent the submission of forms which are in an invalid state.

In addition to the exposed form support settings, the Input provides the same properties and behaves in the same way as a native HTML input element.

Functionality and Features

Setting Validation Requirements

The Input supports props for setting basic validation requirements—for example, the minimum and maximum length. The minLength, maxLength, and required properties enable the user to pre-define minimum requirements which define the validity state of the component and allow a successful form submission.

<div id="vueapp" class="vue-app">
   <div class="row example-wrapper">
                <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
                    <div class="card">
                        <div class="card-block">
                            <form class="k-form" @submit="handleSubmit">
                                <fieldset>
                                    <legend>Create new account:</legend>
                                    <div class="mb-3">
                                        <k-input
                                            :name="'username'"
                                            :style='{ width: "100%" }'
                                            :label="'First Name'"
                                            :pattern="'[A-Za-z]+'"
                                            :min-length="2"
                                            :required="true"
                                        >
                                        </k-input>
                                    </div>
                                    <div class="mb-3">
                                        <k-input
                                            :name="'password'"
                                            type="password"
                                            :style="{ width: '100%' }"
                                            :label="'Password'"
                                            :required="true"
                                            :min-length="6"
                                            :max-length="18"
                                        />
                                    </div>
                                    <div class="mb-3">
                                        <k-input
                                            :name="'confirmPassword'"
                                            :type="'password'"
                                            :style="{ width: '100%' }"
                                            :label="'Confirm Password'"
                                            :min-length="6"
                                            :max-length="18"
                                        />
                                    </div>
                                    <div class="mb-3">
                                        <k-input
                                            :name="'email'"
                                            :type="'email'"
                                            :style="{ width: '100%' }"
                                            :label="'Email address'"
                                            :required='true'
                                        />
                                    </div>
                                </fieldset>
                                <input type="submit" class="k-button k-primary" value="Search" />
                            </form>
                        </div>
                    </div>
                </div>
               <div v-if="success"
                        class="alert alert-success"
                        :style="{ position: 'absolute' }"
                    >
                        Form submitted!
                </div>
            </div>
</div>
import { Input } from '@progress/kendo-vue-inputs';
Vue.component('k-input', Input);

new Vue({
    el: '#vueapp',
    data: function(){
        return {
            success: false
        }
    },
    methods: {
        handleSubmit (event) {
            event.preventDefault();
            this.success = true;
            setTimeout(() => { this.success = false; }, 3000);
        }
    }
});

Setting Custom Validation Messages

You can implement custom error messages which will be displayed when the Input is in an invalid state and the user tries to submit the form. To render a custom validation message, set the validationMessage prop.

<div id="vueapp" class="vue-app">
    <div class="row example-wrapper">
                 <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
                     <div class="card">
                         <div class="card-block">
                             <form class="k-form" @submit="handleSubmit">
                                 <fieldset>
                                     <legend>Create new account:</legend>
                                     <div class="mb-3">
                                         <k-input
                                             :name="'username'"
                                             :style='{ width: "100%" }'
                                             :label="'First Name'"
                                             :pattern="'[A-Za-z]+'"
                                             :min-length="2"
                                             :required="true"
                                             :validation-message="usernameValidationMessage"
                                         >
                                         </k-input>
                                     </div>
                                     <div class="mb-3">
                                         <k-input
                                             :name="'password'"
                                             type="password"
                                             :style="{ width: '100%' }"
                                             :label="'Password'"
                                             :required="true"
                                             :min-length="6"
                                             :max-length="18"
                                             :validation-message="passwordValidationMessage"
                                         />
                                     </div>
                                     <div class="mb-3">
                                         <k-input
                                             :name="'confirmPassword'"
                                             :type="'password'"
                                             :style="{ width: '100%' }"
                                             :label="'Confirm Password'"
                                             :min-length="6"
                                             :max-length="18"
                                             :validation-message="passwordValidationMessage"
                                         />
                                     </div>
                                     <div class="mb-3">
                                         <k-input
                                             :name="'email'"
                                             :type="'email'"
                                             :style="{ width: '100%' }"
                                             :label="'Email address'"
                                             :required='true'
                                         />
                                     </div>
                                 </fieldset>
                                 <input type="submit" class="k-button k-primary" value="Search" />
                             </form>
                         </div>
                     </div>
                 </div>
                <div v-if="success"
                         class="alert alert-success"
                         :style="{ position: 'absolute' }"
                     >
                         Form submitted!
                 </div>
             </div>
 </div>
import Vue from 'vue';
import { Input } from '@progress/kendo-vue-inputs';

Vue.component('k-input', Input);
new Vue({
    el: '#vueapp',
    data: function(){
        return {
            usernameValidationMessage: "Your username should contain only letters!",
            passwordValidationMessage: "Please enter password between 6 and 16 characters!",
            success: false
        }
    },
    methods: {
        handleSubmit (event) {
            event.preventDefault();
            this.success = true;
            setTimeout(() => { this.success = false; }, 3000);
        }
    }
});

Enforcing the Validity State

The Input enables you to set its validity state by utilizing its props. Setting the validity state allows for the implementation of complex validation scenarios that are based on multiple sources. To override the current validity state and apply the corresponding styles, use the valid prop.

<div id="vueapp" class="vue-app">
    <div class="row example-wrapper">
                 <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
                     <div class="card">
                         <div class="card-block">
                             <form class="k-form" @submit="handleSubmit">
                                 <fieldset>
                                     <legend>Create new account:</legend>
                                     <div class="mb-3">
                                         <k-input
                                             :name="'username'"
                                             :style='{ width: "100%" }'
                                             :label="'First Name'"
                                             :pattern="'[A-Za-z]+'"
                                             :min-length="2"
                                             :required="true"
                                             :validation-message="usernameValidationMessage"
                                         >
                                         </k-input>
                                     </div>
                                     <div class="mb-3">
                                         <k-input
                                             v-model="possword"
                                             :name="'password'"
                                             type="password"
                                             :style="{ width: '100%' }"
                                             :label="'Password'"
                                             :required="true"
                                             :min-length="6"
                                             :max-length="18"
                                             :validation-message="passwordValidationMessage"
                                         />
                                     </div>
                                     <div class="mb-3">
                                         <k-input
                                             v-model="confirmPassword"
                                             :name="'confirmPassword'"
                                             :type="'password'"
                                             :style="{ width: '100%' }"
                                             :label="'Confirm Password'"
                                             :valid="confirmValid"
                                             :min-length="6"
                                             :max-length="18"
                                             :validation-message="passwordValidationMessage"
                                         />
                                     </div>
                                     <div class="mb-3">
                                         <k-input
                                             :name="'email'"
                                             :type="'email'"
                                             :style="{ width: '100%' }"
                                             :label="'Email address'"
                                             :required='true'
                                         />
                                     </div>
                                 </fieldset>
                                 <input type="submit" class="k-button k-primary" value="Search" />
                             </form>
                         </div>
                     </div>
                 </div>
                <div v-if="success"
                         class="alert alert-success"
                         :style="{ position: 'absolute' }"
                     >
                         Form submitted!
                 </div>
             </div>
 </div>
import Vue from 'vue';
import { Input } from '@progress/kendo-vue-inputs';

Vue.component('k-input', Input);
new Vue({
    el: '#vueapp',
    data: function(){
        return {
            usernameValidationMessage: "Your username should contain only letters!",
            passwordValidationMessage: "Please enter password between 6 and 16 characters!",
            confirmPasswordValidationMessage: "Passwords does not match!",
            password: '',
            confirmPassword: '',
            success: false
        }
    },
    computed: {
        confirmValid: function(){
            return this.password && this.password === this.confirmPassword;
        }
    },
    methods: {
        handleSubmit (event) {
            event.preventDefault();
            this.success = true;
            setTimeout(() => { this.success = false; }, 3000);
        }
    }
});

Disabling the Validation Styling

By default, to achieve a visual representation of its invalid state, the Input applies the k-state-invalid class name to the wrapping component. To disable the utilization of k-state-invalid, set the validity-styles property to false.

<div id="vueapp" class="vue-app">
    <div class="row example-wrapper">
                 <div class="col-xs-12 col-sm-6 offset-sm-3 example-col">
                     <div class="card">
                         <div class="card-block">
                             <form class="k-form" @submit="handleSubmit">
                                 <fieldset>
                                     <legend>Create new account:</legend>
                                     <div class="mb-3">
                                         <k-input
                                             :validity-styles="false"
                                             :name="'username'"
                                             :style='{ width: "100%" }'
                                             :label="'First Name'"
                                             :pattern="'[A-Za-z]+'"
                                             :min-length="2"
                                             :required="true"
                                         >
                                         </k-input>
                                     </div>
                                     <div class="mb-3">
                                         <k-input
                                             :name="'password'"
                                             type="password"
                                             :style="{ width: '100%' }"
                                             :label="'Password'"
                                             :required="true"
                                             :min-length="6"
                                             :max-length="18"
                                         />
                                     </div>
                                     <div class="mb-3">
                                         <k-input
                                             :name="'confirmPassword'"
                                             :type="'password'"
                                             :style="{ width: '100%' }"
                                             :label="'Confirm Password'"
                                             :min-length="6"
                                             :max-length="18"
                                         />
                                     </div>
                                     <div class="mb-3">
                                         <k-input
                                             :name="'email'"
                                             :type="'email'"
                                             :style="{ width: '100%' }"
                                             :label="'Email address'"
                                             :required='true'
                                         />
                                     </div>
                                 </fieldset>
                                 <input type="submit" class="k-button k-primary" value="Search" />
                             </form>
                         </div>
                     </div>
                 </div>
                <div v-if="success"
                         class="alert alert-success"
                         :style="{ position: 'absolute' }"
                     >
                         Form submitted!
                 </div>
             </div>
 </div>
import Vue from 'vue';

import { Input } from '@progress/kendo-vue-inputs';
Vue.component('k-input', Input);

new Vue({
    el: '#vueapp',
    data: function(){
        return {
            success: false
        }
    },
    methods: {
        handleSubmit (event) {
            event.preventDefault();
            this.success = true;
            setTimeout(() => { this.success = false; }, 3000);
        }
    }
});

In this article