Valid MaskedTextBox

The MaskedTextBox provides options for indicating that the submitted input is not valid.

To indicate to the user that the typed character is not allowed, use the valid property of the MaskedTextBox.

class App extends React.Component {
    state = {
        value: '(359) 884-12-33-21',
        valid: true
    };
    timeout;

    handleChange = (event) => {
        if (this.state.value === event.target.value) {
            this.updateValidity(event);
        } else {
            this.setState({ value: event.target.value });
        }
    }

    updateValidity(event) {
        const textbox = event.target;
        if (textbox.element.value.length > textbox.value.length) {
            if (this.state.valid) {
                this.setState({ valid: false });
            } else {
                clearTimeout(this.timeout);
            }
            this.timeout = setTimeout(() => {
                this.setState({ valid: true });
            }, 100);
        }
    }

    render() {
        return (
            <div>
                <p>Type any letters</p>
                <MaskedTextBox
                    value={this.state.value}
                    onChange={this.handleChange}
                    mask="(999) 000-00-00-00"
                    valid={this.state.valid}
                />
            </div>
        );
    }
}

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