Forms Support

The MaskedTextBox 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 MaskedTextBox provides an option for setting validation requirements. The required property defines the validity state of the component and allows a successful form submission.

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

import { Input, MaskedTextBox } from '@progress/kendo-react-inputs';

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>Please fill in the fields:</legend>
                                    <div className="mb-3">
                                        <Input
                                            name="firstName"
                                            style={{ width: "100%" }}
                                            label="First Name"
                                            defaultValue="John"
                                            pattern="[A-Za-z]+"
                                            minLength={2}
                                            required={true}
                                        />
                                    </div>
                                    <div className="mb-3">
                                        <Input
                                            name="lastName"
                                            style={{ width: '100%' }}
                                            label="Last Name"
                                            defaultValue="Smith"
                                            pattern="[A-Za-z]+"
                                            minLength={2}
                                            required={true}
                                        />
                                    </div>
                                    <div>
                                        <MaskedTextBox
                                            name="postcode"
                                            width="100%"
                                            label="Postcode (A9 9AA)"
                                            required={true}
                                            mask="A9 9AA"
                                        />
                                    </div>
                                </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>
        );
    }

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

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Setting Custom Validation Messages

You can implement custom error messages which will be displayed when the MaskedTextBox 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 { MaskedTextBox, Input } from '@progress/kendo-react-inputs';

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>Please fill in the fields:</legend>
                                    <div className="mb-3">
                                        <Input
                                            name="firstName"
                                            style={{ width: "100%" }}
                                            label="First Name"
                                            defaultValue="John"
                                            required={true}
                                            pattern="[A-Za-z]+"
                                            minLength={2}
                                            validationMessage="Please enter your first name!"
                                        />
                                    </div>
                                    <div className="mb-3">
                                        <Input
                                            name="lastName"
                                            style={{ width: '100%' }}
                                            label="Last Name"
                                            defaultValue="Smith"
                                            required={true}
                                            pattern="[A-Za-z]+"
                                            minLength={2}
                                            validationMessage="Please enter your last name!"
                                        />
                                    </div>
                                    <div>
                                        <MaskedTextBox
                                            name="postcode"
                                            width="100%"
                                            required={true}
                                            validationMessage="Please enter your postcode!"
                                            label="Postcode (A9 9AA)"
                                            mask="A9 9AA"
                                        />
                                    </div>
                                </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>
        );
    }

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

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Enforcing the Validity State

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

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

import { MaskedTextBox, Input } from '@progress/kendo-react-inputs';

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

    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>Please fill in the fields:</legend>
                                    <div className="mb-3">
                                        <Input
                                            name="firstName"
                                            style={{ width: "100%" }}
                                            label="First Name"
                                            defaultValue="John"
                                        />
                                    </div>
                                    <div className="mb-3">
                                        <Input
                                            name="lastName"
                                            style={{ width: '100%' }}
                                            label="Last Name"
                                            defaultValue="Smith"
                                        />
                                    </div>
                                    <div>
                                        <MaskedTextBox
                                            value={this.state.postcode}
                                            onChange={this.onChange}
                                            valid={this.state.postcode.replace(/_/g, '').length > 3}
                                            name="postcode"
                                            width="100%"
                                            required={true}
                                            validationMessage="Please enter valid postcode!"
                                            label="Postcode (A9 9AA)"
                                            mask="A9 9AA"
                                        />
                                    </div>
                                </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>
        );
    }

    onChange = (event) => {
        const postcode = event.target.value;
        if (this.state.postcode !== postcode) {
            this.setState({ postcode: postcode });
        }
    }

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

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Disabling the Validation Styling

By default, to achieve a visual representation of its invalid state, the MaskedTextBox 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 { MaskedTextBox, Input } from '@progress/kendo-react-inputs';

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>Please fill in the fields:</legend>
                                    <div className="mb-3">
                                        <Input
                                            name="firstName"
                                            defaultValue="John"
                                            style={{ width: "100%" }}
                                            label="First Name"
                                            pattern="[A-Za-z]{1,32}"
                                        />
                                    </div>
                                    <div className="mb-3">
                                        <Input
                                            name="lastName"
                                            defaultValue="Smith"
                                            style={{ width: '100%' }}
                                            label="Last Name"
                                        />
                                    </div>
                                    <div>
                                        <MaskedTextBox
                                            validityStyles={false}
                                            name="postcode"
                                            width="100%"
                                            required={true}
                                            validationMessage="Please enter valid postcode!"
                                            label="Postcode (A9 9AA)"
                                            mask="A9 9AA"
                                        />
                                    </div>
                                </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>
        );
    }

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

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
 /