触发按钮 onClick 后发生 HTML 输入验证答案

【问题标题】：HTML input validation happens after button onClick is triggered触发按钮 onClick 后发生 HTML 输入验证
【发布时间】：2023-04-05 07:29:02
【问题描述】：

我有一个简单的表单，问题是验证发生在点击事件注册之后，因此触发了doSomething() 函数。我希望电子邮件验证阻止用户提交表单，以便不会触发该功能。我该怎么做？

<form>
  <input type="email" placeholder="your email here" required/>
  <button type="submit" onClick="doSomething()">Submit</button>
</form>

<script>
function doSomething(){
    // gets triggered even when the email does not pass validation
    console.log('Doing work..');
}
</script>

JSFiddle

【问题讨论】：

标签： html forms validation input

【解决方案1】：

你可以在表单中使用 onSubmit 属性，它只会在所有字段都被验证时调用你的函数。

<form onSubmit="doSomething()">
  <input type="email" placeholder="your email here" required/>
  <input type="submit"/>
</form>

<script>
function doSomething(){
    // gets triggered even when the email does not pass validation
    console.log('Doing work..');
}
</script>

查看this 问题以了解如何阻止表单提交。

谢谢，

【讨论】：