Perform HTML Input Validation on React Button Click

Question

This is a simplified scenario.

I have a form with a required input field and a button. The button has an onClick React handler and is of type "button". I want the browser to check the HTML fields and do some initial validation (like it would do if no React were involved and the button were of type "submit"). I imagine I should do something in the handler function, but I am not sure what.

A few things I tried:

• Changing the button to type "submit" does perform the check, but also calls the handler, which does not know whether the check succeeded or failed
• Adding the handler on the form instead works, but makes the real example harder to maintain because I have a lot of buttons

Thank you

<div id="app"></div>

class MyClass extends React.PureComponent {
    render() {
        return (
            <form action="#">
                <input type="text" required/>
                <button type="button" onClick={e => this.handle(e)}>Press</button>
            </form>
        )
    }

    handle(event) {
        // What should I do here?
    }
}


ReactDOM.render(<MyClass />, document.querySelector("#app"))

https://jsfiddle.net/89wr3ot4/

Answer 1

Following is working example which is modified from above jsfiddle

class MyClass extends React.Component {
    state = { value: '', message: ''}
    render() {
        return (
            <form action="#">
            <input type="text" required value={this.state.value} onChange={e => this.setState({value: e.target.value})} />
                <button type="button" onClick={e => this.handle(e)}>Press</button>
                <p> {this.state.message }</p>
            </form>
        )
    }

    handle(event) {
        // What should I do here?
        const { value } = this.state;
        if (value === '') {
            this.setState({message: 'Invalid!, Please enter valid input'})
        } else {
            this.setState({message: 'Yeah!, Got Valid input'})
        }   
    }
}


ReactDOM.render(<MyClass />, document.querySelector("#app"))

Answer 2

You need to create state for input value

const [inputValue, setInputValue] = useState(''); //for functional component
const inputHandler = (event) => setInputValue(event.target.value);

then

<input type='text' value={inputValue} onChange={inputHandler} />

and check in your 'handler' function what you want.

handle(event) {
  if (inputValue.length > 0) //do what you want...
}

Answer 3

It looks like form has a checkValidity() and reportValidity() API. The answer then becomes

class MyClass extends React.PureComponent {
    render() {
        return (
            <form action="#" ref={this.formRef}>
                <input type="text" required/>
                <button type="button" onClick={e => this.handle(e)}>Press</button>
            </form>
        )
    }

    handle(event) {
        const form = this.formRef.current;
        if (!form.checkValidity()) {
            form.reportValidity()
            return
        }
        // Everything else
    }
}


ReactDOM.render(<MyClass />, document.querySelector("#app"))