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

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

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?

Share Improve this question asked Oct 5, 2018 at 12:22 Barry Michael DoyleBarry Michael Doyle 10.7k32 gold badges98 silver badges159 bronze badges
Add a ment  | 

2 Answers 2

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

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1742395074a4435780.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信