Validation in React TextBox component

21 Feb 20268 minutes to read

Provide visual feedback for form validation using three predefined validation states: error, warning, and success. Apply these states by adding the corresponding CSS 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'));