React onInvalid

Testing React's new onInvalid hook

by JakobJingleheimer

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

label {
    display: block;
}

input {
    margin-left: 0.5em;
}

React

class App extends React.Component {
	onInvalid = (event) => {
        event.preventDefault();
        event.persist();
        console.log(...event.currentTarget);
		//[...event.currentTarget.elements.validity].forEach(({validity}) => console.log(validity));
    }
    
    onSubmit = (event) => event.preventDefault();
    
    render() {
        return (
        	<form
                name="test"
                onInvalid={this.onInvalid}
            >
                <label>
                    Age
                    <input
                        defaultValue="200"
                        max="150"
                        name="age"
                        type="number"
                    />
                </label>  
                
                <button
                    type="submit"
                >
                    Submit
                </button>
            </form>
        );
    }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);