React how to trigger form submit on input blur?

Question

I'm trying to make use of the HTML5 <input type="email" /> validation check.

I can get it working fine doing this:

<form>
  <input type="email" />
  <input type="submit" />
</form>

This gets the validation to work on clicking the sumbit button. However I'd like to trigger the form to submit upon having my email field blur.

How do I trigger the form without a submit button onBlur?

Like this:

<form>
  <input type="email" onBlur={/* trigger form submission */} />
</form>

Alternatively, is there a better approach to performaning the HTML5 email validation check upon input blur?

Answer 1

use the native checkValidity method

<form>
  <input type="email" id="a" />
</form>

const a = document.querySelector('#a')


a.addEventListener('blur', e => {
const isValid =  e.target.checkValidity()
console.log(isValid)
})

Answer 2

Put a ref attribute on your form and call the submit function:

<form ref="myForm">
  <input type="email" onBlur={this.submitForm.bind(this)} />
</form>

Add a function:

submitForm(){
  this.refs['myForm'].submit()
}