Forms Support

The MultiSelect supports a native KendoReact 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 MultiSelect 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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { MultiSelect } from '@progress/kendo-react-dropdowns';
import { foods, drinks } from './shop';

class App extends React.Component {
    state = {
        success: false
    };

    render() {
        return (
            <div className="row example-wrapper">
                <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
                    <div className="card">
                        <div className="card-block">
                            <form className="k-form" onSubmit={this.handleSubmit}>
                                <fieldset>
                                    <legend>Add products to your basket:</legend>
                                    <div className="mb-3">
                                        <MultiSelect
                                            style={{ width: '100%' }}
                                            label="Foods"
                                            name="foods"
                                            data={foods}
                                            required={true}
                                        />
                                    </div>
                                    <div>
                                        <MultiSelect
                                            style={{ width: '100%' }}
                                            label="Drinks"
                                            name="drinks"
                                            data={drinks}
                                            required={true}
                                        />
                                    </div>
                                </fieldset>
                                <input type="submit" className="k-button k-primary" value="Add to basket" />
                            </form>
                        </div>
                    </div>
                </div>
                {this.state.success && (
                    <div
                        className="alert alert-success"
                        style={{ position: 'absolute' }}
                    >
                        Form submitted!
                    </div>)}
            </div>
        );
    }

    handleSubmit = (event) => {
        event.preventDefault();
        this.setState({ success: true });
        setTimeout(() => { this.setState({ success: false }); }, 3000);
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
export const foods = [
    'Garlic bread',
    'Chicken nuggets',
    'Potatoes',
    'Rice',
    'Tomato sauce',
    'Broccoli',
    'Cheddar',
    'Cereal',
    'Beef',
    'Lobster',
    'Salmon',
    'Mushrooms',
    'Onions',
    'Apples',
    'Oranges',
    'Burritos'
];

export const drinks = [
    'Milk',
    'Water',
    'Apple juice',
    'Orange juice',
    'Beer',
    'Soda',
    'Champagne',
    'Red wine',
    'Rum',
    'Sake'
];

Setting Custom Validation Messages

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

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { MultiSelect } from '@progress/kendo-react-dropdowns';
import { foods, drinks } from './shop';

class App extends React.Component {
    state = {
        success: false
    };

    render() {
        const foodsValidationMessage = 'Please add foods to your basket!';
        const drinksValidationMessage = 'Please add drinks to your basket!';

        return (
            <div className="row example-wrapper">
                <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
                    <div className="card">
                        <div className="card-block">
                            <form className="k-form" onSubmit={this.handleSubmit}>
                                <fieldset>
                                    <legend>Add products to your basket:</legend>
                                    <div className="mb-3">
                                        <MultiSelect
                                            style={{ width: '100%' }}
                                            label="Foods"
                                            name="foods"
                                            data={foods}
                                            required={true}
                                            validationMessage={foodsValidationMessage}
                                        />
                                    </div>
                                    <div>
                                        <MultiSelect
                                            style={{ width: '100%' }}
                                            label="Drinks"
                                            name="drinks"
                                            data={drinks}
                                            required={true}
                                            validationMessage={drinksValidationMessage}
                                        />
                                    </div>
                                </fieldset>
                                <input type="submit" className="k-button k-primary" value="Add to basket" />
                            </form>
                        </div>
                    </div>
                </div>
                {this.state.success && (
                    <div
                        className="alert alert-success"
                        style={{ position: 'absolute' }}
                    >
                        Form submitted!
                    </div>)}
            </div>
        );
    }

    handleSubmit = (event) => {
        event.preventDefault();
        this.setState({ success: true });
        setTimeout(() => { this.setState({ success: false }); }, 3000);
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
export const foods = [
    'Garlic bread',
    'Chicken nuggets',
    'Potatoes',
    'Rice',
    'Tomato sauce',
    'Broccoli',
    'Cheddar',
    'Cereal',
    'Beef',
    'Lobster',
    'Salmon',
    'Mushrooms',
    'Onions',
    'Apples',
    'Oranges',
    'Burritos'
];

export const drinks = [
    'Milk',
    'Water',
    'Apple juice',
    'Orange juice',
    'Beer',
    'Soda',
    'Champagne',
    'Red wine',
    'Rum',
    'Sake'
];

Enforcing the Validity State

The MultiSelect 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.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { MultiSelect } from '@progress/kendo-react-dropdowns';
import { foods, drinks } from './shop';

class App extends React.Component {
    state = {
        foods: [],
        drinks: [],
        additionalComments: '',
        success: false
    };

    render() {
        return (
            <div className="row example-wrapper">
                <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
                    <div className="card">
                        <div className="card-block">
                            <form className="k-form" onSubmit={this.handleSubmit}>
                                <fieldset>
                                    <legend>Add products to your basket:</legend>
                                    <div className="mb-3">
                                        <MultiSelect
                                            style={{ width: '100%' }}
                                            value={this.state.foods}
                                            onChange={this.handleChange}
                                            label="Foods"
                                            name="foods"
                                            data={foods}
                                        />
                                    </div>
                                    <div className="mb-3">
                                        <MultiSelect
                                            style={{ width: '100%' }}
                                            value={this.state.drinks}
                                            onChange={this.handleChange}
                                            label="Drinks"
                                            name="drinks"
                                            data={drinks}
                                            valid={(this.state.foods.length > 0 && this.state.drinks.length > 1)}
                                            validationMessage={this.state.foods.length === 0
                                                ? 'Pick something to eat first!'
                                                : 'Please pick at least 2 drinks!'}
                                        />
                                    </div>
                                    <label className="k-form-field">
                                        <span>Additional Comments</span>
                                        <textarea
                                            className="k-textarea"
                                            style={{ width: '100%' }}
                                            name="additionalComments"
                                            value={this.state.additionalComments}
                                            onChange={this.handleChange}
                                        />
                                    </label>
                                </fieldset>
                                <input type="submit" className="k-button k-primary" value="Search" />
                            </form>
                        </div>
                    </div>
                </div>
                {this.state.success && (
                    <div
                        className="alert alert-success"
                        style={{ position: 'absolute' }}
                    >
                        Form submitted!
                    </div>)}
            </div>
        );
    }

    handleChange = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        });
    }

    handleSubmit = (event) => {
        event.preventDefault();
        this.setState({ success: true });
        setTimeout(() => { this.setState({ success: false }); }, 3000);
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
export const foods = [
    'Garlic bread',
    'Chicken nuggets',
    'Potatoes',
    'Rice',
    'Tomato sauce',
    'Broccoli',
    'Cheddar',
    'Cereal',
    'Beef',
    'Lobster',
    'Salmon',
    'Mushrooms',
    'Onions',
    'Apples',
    'Oranges',
    'Burritos'
];

export const drinks = [
    'Milk',
    'Water',
    'Apple juice',
    'Orange juice',
    'Beer',
    'Soda',
    'Champagne',
    'Red wine',
    'Rum',
    'Sake'
];

Disabling the Validation Styling

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

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { MultiSelect } from '@progress/kendo-react-dropdowns';
import { foods, drinks } from './shop';

class App extends React.Component {
    state = {
        foods: [],
        drinks: [],
        additionalComments: '',
        success: false
    };

    render() {
        return (
            <div className="row example-wrapper">
                <div className="col-xs-12 col-sm-6 offset-sm-3 example-col">
                    <div className="card">
                        <div className="card-block">
                            <form className="k-form" onSubmit={this.handleSubmit}>
                                <fieldset>
                                    <legend>Add products to your basket:</legend>
                                    <div className="mb-3">
                                        <MultiSelect
                                            style={{ width: '100%' }}
                                            value={this.state.foods}
                                            onChange={this.handleChange}
                                            label="Foods"
                                            name="foods"
                                            required={true}
                                            data={foods}
                                        />
                                    </div>
                                    <div className="mb-3">
                                        <MultiSelect
                                            validityStyles={false}

                                            style={{ width: '100%' }}
                                            value={this.state.drinks}
                                            onChange={this.handleChange}
                                            label="Drinks"
                                            name="drinks"
                                            data={drinks}
                                            valid={(this.state.foods.length > 0 && this.state.drinks.length > 1)}
                                            validationMessage={this.state.foods.length === 0
                                                ? 'Pick something to eat first!'
                                                : 'Please pick at least 2 drinks!'}
                                        />
                                    </div>
                                    <label className="k-form-field">
                                        <span>Additional Comments</span>
                                        <textarea
                                            className="k-textarea"
                                            style={{ width: '100%' }}
                                            name="additionalComments"
                                            value={this.state.additionalComments}
                                            onChange={this.handleChange}
                                        />
                                    </label>
                                </fieldset>
                                <input type="submit" className="k-button k-primary" value="Search" />
                            </form>
                        </div>
                    </div>
                </div>
                {this.state.success && (
                    <div
                        className="alert alert-success"
                        style={{ position: 'absolute' }}
                    >
                        Form submitted!
                    </div>)}
            </div>
        );
    }

    handleChange = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        });
    }

    handleSubmit = (event) => {
        event.preventDefault();
        this.setState({ success: true });
        setTimeout(() => { this.setState({ success: false }); }, 3000);
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
export const foods = [
    'Garlic bread',
    'Chicken nuggets',
    'Potatoes',
    'Rice',
    'Tomato sauce',
    'Broccoli',
    'Cheddar',
    'Cereal',
    'Beef',
    'Lobster',
    'Salmon',
    'Mushrooms',
    'Onions',
    'Apples',
    'Oranges',
    'Burritos'
];

export const drinks = [
    'Milk',
    'Water',
    'Apple juice',
    'Orange juice',
    'Beer',
    'Soda',
    'Champagne',
    'Red wine',
    'Rum',
    'Sake'
];

In this article