Forms Support

The DropDownList supports a native KendoVue implementation of HTML5 form validation.

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

Functionality and Features

Setting Validation Requirements

The DropDownList supports props for setting basic validation requirements. The required property enables the user to pre-define a selection that is required for 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>Select your flight route:</legend>
                                    <div class="mb-3">
                                        <dropdownlist
                                            :style="{ width: '100%' }"
                                            :label="'Departure Country'"
                                            :name="'departureCountry'"
                                            :data-items="countries"
                                            :required="true"
                                        >
                                        </dropdownlist>
                                    </div>
                                    <div>
                                        <dropdownlist
                                            :style="{ width: '100%' }"
                                            :label="'Arrival Country'"
                                            :name="'arrivalCountry'"
                                            :data-items="countries"
                                            :required="true"
                                        >
                                        </dropdownlist>
                                    </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 { DropDownList } from '@progress/kendo-vue-dropdowns';
Vue.component('dropdownlist', DropDownList);

new Vue({
    el: '#vueapp',
    methods: {
         handleSubmit (event) {
            event.preventDefault();
            this.success = true;
            setTimeout(() => { this.success = false; }, 3000);
        }
    },
     data: function () {
        return {
            success: false,
              countries: [ 'Albania', 'Andorra', 'Armenia', 'Austria', 'Azerbaijan',  'Belarus', 'Belgium', 'Bosnia & Herzegovina',  'Bulgaria', 'Croatia',  'Cyprus', 'Czech Republic', 'Denmark', 'Estonia', 'Finland', 'France', 'Georgia', 'Germany', 'Greece', 'Hungary', 'Iceland', 'Ireland', 'Italy', 'Kosovo', 'Latvia', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macedonia', 'Malta', 'Moldova', 'Monaco', 'Montenegro', 'Netherlands', 'Norway', 'Poland', 'Portugal', 'Romania', 'Russia', 'San Marino', 'Serbia', 'Slovakia', 'Slovenia', 'Spain', 'Sweden', 'Switzerland', 'Turkey', 'Ukraine', 'United Kingdom', 'Vatican City' ]
        };
    },
});

Setting Custom Validation Messages

You can implement custom error messages which will be displayed when the DropDownList is in an invalid state and the user tries to submit the form. To render a custom validation message, set the validation-message 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>Select your flight route:</legend>
                                    <div class="mb-3">
                                        <dropdownlist
                                            :style="{ width: '100%' }"
                                            :label="'Departure Country'"
                                            :name="'departureCountry'"
                                            :data-items="countries"
                                            :required="true"
                                            :validation-message="departureValidationMessage"
                                        >
                                        </dropdownlist>
                                    </div>
                                    <div>
                                        <dropdownlist
                                            :style="{ width: '100%' }"
                                            :label="'Arrival Country'"
                                            :name="'arrivalCountry'"
                                            :data-items="countries"
                                            :required="true"
                                            :validation-message="arrivalValidationMessage"
                                        >
                                        </dropdownlist>
                                    </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 { DropDownList } from '@progress/kendo-vue-dropdowns';
import { countries } from './app/countries';

Vue.component('dropdownlist', DropDownList);

new Vue({
    el: '#vueapp',
    methods: {
         handleSubmit (event) {
            event.preventDefault();
            this.success = true;
            setTimeout(() => { this.success = false; }, 3000);
        }
    },
     data: function () {
        return {
            departureValidationMessage: 'Please select a departure country!',
            arrivalValidationMessage: 'Please select an arrival country!',
            success: false,
            countries: countries
        };
    },
});

export const countries = [
    'Albania',
    'Andorra',
    'Armenia',
    'Austria',
    'Azerbaijan',
    'Belarus',
    'Belgium',
    'Bosnia & Herzegovina',
    'Bulgaria',
    'Croatia',
    'Cyprus',
    'Czech Republic',
    'Denmark',
    'Estonia',
    'Finland',
    'France',
    'Georgia',
    'Germany',
    'Greece',
    'Hungary',
    'Iceland',
    'Ireland',
    'Italy',
    'Kosovo',
    'Latvia',
    'Liechtenstein',
    'Lithuania',
    'Luxembourg',
    'Macedonia',
    'Malta',
    'Moldova',
    'Monaco',
    'Montenegro',
    'Netherlands',
    'Norway',
    'Poland',
    'Portugal',
    'Romania',
    'Russia',
    'San Marino',
    'Serbia',
    'Slovakia',
    'Slovenia',
    'Spain',
    'Sweden',
    'Switzerland',
    'Turkey',
    'Ukraine',
    'United Kingdom',
    'Vatican City'
];

Enforcing the Validity State

The DropDownList enables you to set its validity state by utilizing its exposed 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>Select your flight route:</legend>
                                    <div class="mb-3">
                                        <dropdownlist
                                            :style="{ width: '100%' }"
                                            :label="'Departure Country'"
                                            :value="departureCountry"
                                            @change="handleChange"
                                            :name="'departureCountry'"
                                            :data-items="countries"
                                            :required="true"
                                        >
                                        </dropdownlist>
                                    </div>
                                    <div>
                                        <dropdownlist
                                            :style="{ width: '100%' }"
                                            :label="'Arrival Country'"
                                            :value="arrivalCountry"
                                            @change="handleChange"
                                            :name="'arrivalCountry'"
                                            :data-items="countries"
                                            :required="true"
                                            :valid="valid"
                                            :validation-message="validationMessage"
                                        >
                                        </dropdownlist>
                                    </div>
                                    <label class="k-form-field">
                                        <span>Additional Comments</span>
                                        <textarea
                                            class="k-textarea"
                                            :style="{ width: '100%' }"
                                            name="additionalComments"
                                            v-model="additionalComments"
                                        >
                                        </textarea>
                                    </label>
                                </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 { DropDownList } from '@progress/kendo-vue-dropdowns';
import { countries } from './app/countries';

Vue.component('dropdownlist', DropDownList);

new Vue({
    el: '#vueapp',
    computed: {
        valid: function(){
            return this.departureCountry !== null && this.arrivalCountry !== null;
        },
        validationMessage: function(){
            return this.departureCountry === null
            ? 'Please select a Departure Country first!'
            : 'Please select an Arrival Country';
        }     
    },
    methods: {
        handleChange(event) {
            this[event.target.$props.name] = event.value;
        },
         handleSubmit (event) {
            event.preventDefault();
            this.success = true;
            setTimeout(() => { this.success = false; }, 3000);
        }
    },
     data: function () {
        return {
            departureCountry: null,
            arrivalCountry: null,
            additionalComments: '',
            success: false,
            countries: countries
        };
    },
});
export const countries = [
    'Albania',
    'Andorra',
    'Armenia',
    'Austria',
    'Azerbaijan',
    'Belarus',
    'Belgium',
    'Bosnia & Herzegovina',
    'Bulgaria',
    'Croatia',
    'Cyprus',
    'Czech Republic',
    'Denmark',
    'Estonia',
    'Finland',
    'France',
    'Georgia',
    'Germany',
    'Greece',
    'Hungary',
    'Iceland',
    'Ireland',
    'Italy',
    'Kosovo',
    'Latvia',
    'Liechtenstein',
    'Lithuania',
    'Luxembourg',
    'Macedonia',
    'Malta',
    'Moldova',
    'Monaco',
    'Montenegro',
    'Netherlands',
    'Norway',
    'Poland',
    'Portugal',
    'Romania',
    'Russia',
    'San Marino',
    'Serbia',
    'Slovakia',
    'Slovenia',
    'Spain',
    'Sweden',
    'Switzerland',
    'Turkey',
    'Ukraine',
    'United Kingdom',
    'Vatican City'
];

Disabling the Validation Styling

By default, to achieve a visual representation of its invalid state, the DropDownList 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>Select your flight route:</legend>
                                    <div class="mb-3">
                                        <dropdownlist
                                            :style="{ width: '100%' }"
                                            :label="'Departure Country'"
                                            :value="departureCountry"
                                            @change="handleChange"
                                            :name="'departureCountry'"
                                            :data-items="countries"
                                            :required="true"
                                        >
                                        </dropdownlist>
                                    </div>
                                    <div>
                                        <dropdownlist
                                            :validity-styles="false"
                                            :style="{ width: '100%' }"
                                            :label="'Arrival Country'"
                                            :value="arrivalCountry"
                                            @change="handleChange"
                                            :name="'arrivalCountry'"
                                            :data-items="countries"
                                            :required="true"
                                            :valid="valid"
                                            :validation-message="validationMessage"
                                        >
                                        </dropdownlist>
                                    </div>
                                    <label class="k-form-field">
                                        <span>Additional Comments</span>
                                        <textarea
                                            class="k-textarea"
                                            :style="{ width: '100%' }"
                                            name="additionalComments"
                                            v-model="additionalComments"
                                        >
                                        </textarea>
                                    </label>
                                </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 { DropDownList } from '@progress/kendo-vue-dropdowns';
import { countries } from './app/countries';

Vue.component('dropdownlist', DropDownList);

new Vue({
    el: '#vueapp',
    computed: {
        valid: function(){
            return this.departureCountry !== null && this.arrivalCountry !== null;
        },
        validationMessage: function(){
            return this.departureCountry === null
            ? 'Please select a Departure Country first!'
            : 'Please select an Arrival Country';
        }     
    },
    methods: {
        handleChange(event) {
            this[event.target.$props.name] = event.value;
        },
         handleSubmit (event) {
            event.preventDefault();
            this.success = true;
            setTimeout(() => { this.success = false; }, 3000);
        }
    },
     data: function () {
        return {
            departureCountry: null,
            arrivalCountry: null,
            additionalComments: '',
            success: false,
            countries: countries
        };
    },
});
export const countries = [
    'Albania',
    'Andorra',
    'Armenia',
    'Austria',
    'Azerbaijan',
    'Belarus',
    'Belgium',
    'Bosnia & Herzegovina',
    'Bulgaria',
    'Croatia',
    'Cyprus',
    'Czech Republic',
    'Denmark',
    'Estonia',
    'Finland',
    'France',
    'Georgia',
    'Germany',
    'Greece',
    'Hungary',
    'Iceland',
    'Ireland',
    'Italy',
    'Kosovo',
    'Latvia',
    'Liechtenstein',
    'Lithuania',
    'Luxembourg',
    'Macedonia',
    'Malta',
    'Moldova',
    'Monaco',
    'Montenegro',
    'Netherlands',
    'Norway',
    'Poland',
    'Portugal',
    'Romania',
    'Russia',
    'San Marino',
    'Serbia',
    'Slovakia',
    'Slovenia',
    'Spain',
    'Sweden',
    'Switzerland',
    'Turkey',
    'Ukraine',
    'United Kingdom',
    'Vatican City'
];

In this article