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

Question

我有一个表单，其中包含带有required 标签的输入。它通常会在我单击 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>

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

谢谢

Answer 1

您必须首先使用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>