Validation in React TextBox component

21 Oct 20248 minutes to read

The TextBox supports three types of validation styles namely error, warning, and success. These states are enabled by adding corresponding classes .e-error, .e-warning, or .e-success to the cssClass property.

[Class-component]

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
export default class Default extends React.Component {
    render() {
        return (<div>
        <TextBoxComponent
            id='default'
            placeholder="Input with warning"
            cssClass="e-warning"
        />
        <TextBoxComponent
                id='textboxes'
                placeholder="Input with error"
                cssClass="e-error"
        />
        <TextBoxComponent
                id='textbox'
                placeholder="Input with success"
                cssClass="e-success"
        />
    </div>);
    }
}
ReactDOM.render(<Default />, document.getElementById('input-container'));

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { TextBoxComponent } from '@syncfusion/ej2-react-inputs';
export default class Default extends React.Component {

public render() {
   return (<div>
    <TextBoxComponent
        id='default'
        placeholder="Input with warning"
        cssClass="e-warning"
    />
    <TextBoxComponent
            id='textboxes'
            placeholder="Input with error"
            cssClass="e-error"
    />
    <TextBoxComponent
            id='textbox'
            placeholder="Input with success"
            cssClass="e-success"
    />
</div>
);
}
}

ReactDOM.render(<Default />, document.getElementById('input-container'));

[Functional-component]

index.jsx

import * as React from "react";
import * as ReactDOM from "react-dom";
function Default() {
    return (<div>
        <div className="e-input-group e-warning">
        <input className="e-input" type="text" placeholder="Input with warning" onFocus={onInputFocus} onBlur={onInputBlur}/>
        </div>

        <div className="e-input-group e-error">
        <input className="e-input" type="text" placeholder="Input with error" onFocus={onInputFocus} onBlur={onInputBlur}/>
        </div>

        <div className="e-input-group e-success">
        <input className="e-input" type="text" placeholder="Input with success" onFocus={onInputFocus} onBlur={onInputBlur}/>
        </div>
    </div>);
    function onInputFocus(args) {
        if (!args.target.parentElement.classList.contains('e-input-in-wrap')) {
            args.target.parentElement.classList.add('e-input-focus');
        }
        else {
            args.target.parentElement.parentElement.classList.add('e-input-focus');
        }
    }
    function onInputBlur(args) {
        if (!args.target.parentElement.classList.contains('e-input-in-wrap')) {
            args.target.parentElement.classList.remove('e-input-focus');
        }
        else {
            args.target.parentElement.parentElement.classList.remove('e-input-focus');
        }
    }
}
ReactDOM.render(<Default />, document.getElementById('input-container'));

index.tsx

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

function Default() {
   return (
    <div>
        <div className="e-input-group e-warning">
        <input className="e-input" type="text" placeholder="Input with warning" onFocus = {onInputFocus} onBlur = {onInputBlur} />
        </div>

        <div className="e-input-group e-error">
        <input className="e-input" type="text" placeholder="Input with error" onFocus = {onInputFocus} onBlur = {onInputBlur} />
        </div>

        <div className="e-input-group e-success">
        <input className="e-input" type="text" placeholder="Input with success" onFocus = {onInputFocus} onBlur = {onInputBlur}/>
        </div>
    </div>
);

function onInputFocus(args: React.FocusEvent) {
    if (!((args.target as HTMLElement).parentElement as HTMLElement).classList.contains('e-input-in-wrap')) {
        ((args.target as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus');
    } else {
        (((args.target as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement).classList.add('e-input-focus')
    }
}

function onInputBlur(args: React.FocusEvent) {
    if (!((args.target as HTMLElement).parentElement as HTMLElement).classList.contains('e-input-in-wrap')) {
        ((args.target as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
    } else {
        (((args.target as HTMLElement).parentElement as HTMLElement).parentElement as HTMLElement).classList.remove('e-input-focus');
    }
}
}

ReactDOM.render(<Default />, document.getElementById('input-container'));