时间戳

首页 > 解决方案 > 使用 javascript 验证并提交 html 表单所需的输入

javascript - 使用 javascript 验证并提交 html 表单所需的输入

问题描述

我有一个包含带有required标签的输入的表单。它通常在我单击 type 的输入时进行验证submit。

但我希望能够使用 javascript 以编程方式启动该过程。或单击表单外的元素时。

这可能吗？我怎样才能做到这一点？

function validateAndSubmit(){
  //what can I do here to initiate same process?
  
  //tried

  document.querySelector("form").submit() //this one submits without validating

  document.querySelector("#submitter").click() //no such function as this
}
<form>
  <input required placeholder="name"/>
  <input id="submitter" type="submit"/>
</form>

<button onClick=validateAndSubmit()>Send</button>

我也想从其他事件处理函数中做到这一点。有没有办法做到这一点？

谢谢

标签： javascripthtmlforms

解决方案

您必须首先使用以下方法关注表单focus()：

function validateAndSubmit(){
  document.querySelector("form").focus()
  document.querySelector("#submitter").click()
}
<form>
  <input required placeholder="name"/>
  <input id="submitter" type="submit"/>
</form>

<button onClick=validateAndSubmit()>Send</button>

推荐阅读