Getting Started with Forms

The HTML5 form element supports the validation of inputs that is based on a set of pre-defined rules.

All inputs get validated upon form submission and if the validation fails, the form submission is prevented. Out of the box, KendoReact delivers components which support the HTML5 form validation and also provide props for configuring a set of minimal requirements for a component to be in a valid state.

You can use the KendoReact components which provide forms support in the following scenarios:

Preventing Form Submission

Whenever the validity state of a component is invalid, the form submission gets prevented. The prevention of form submission enables you to achieve the same behavior as the native HTML form elements (such as input and select) and to avoid the explicit verification of the validity state in the onSubmit event handler.

The following example demonstrates how to prevent the form submission by passing the required prop to a component.

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

import { Input } from '@progress/kendo-react-inputs';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import { Button } from '@progress/kendo-react-buttons';

import { countries } from './countries';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.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>Your Form:</legend>
                                    <label className="k-form-field">
                                        <span>A required Input</span>
                                        <Input
                                            name="input"
                                            required={true}
                                        />
                                    </label>
                                </fieldset>
                                <span>A required DropDownList</span>
                                <DropDownList
                                    name="ddl"
                                    required={true}
                                    data={countries}
                                    style={{ width: '100%' }}
                                />
                                <Button className="mt-3" type="submit" primary={true}>Submit</Button>
                            </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')
);
 /