javascript - React how to trigger form submit on input blur? - Stack Overflow

admin管理员组

文章数量:1336143

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?

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?

• javascript
• html
• reactjs
• forms
• onblur

Share Improve this question Follow asked Oct 5, 2018 at 12:22 Barry Michael DoyleBarry Michael Doyle 10.7k3232 gold badges9898 silver badges159159 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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()
}

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)
})

本文标签： javascriptReact how to trigger form submit on input blurStack Overflow