HTML5 表单验证,绑定到非 submit 按钮上

怼烎@ 2022-04-24 06:22 146阅读 0赞

在做一个多步表单时,需要在每一步验证表单项,然而 HTML5 表单验证只是在 submit 按钮点击时才触发。为了在每一步单独验证该步中的表单项,需要将验证触发绑定到非 submit 按钮,方法如下(jQuery):

  1. function submitform() {
  2. let f = document.getElementsByTagName('form')[0]
  3. let sub = $('#submit-button')
  4. if (f.checkValidity()) {
  5. f.submit()
  6. } else {
  7. //alert(f.validationMessage)
  8. sub.trigger('click')
  9. }
  10. }

https://stackoverflow.com/a/16708619/3054511

上面的代码将验证表单第一项。如果有多个表单项需要验证,要逐一获取表单项,逐一应用 checkValidity()。

发表评论

表情:
评论列表 (有 0 条评论,146人围观)

还没有评论,来说两句吧...

相关阅读

    相关 HTML input submit 按钮

    将`<input>`标签的type属性值设置为"submit"即可创建一个提交按钮。 点击提交按钮,表单会有提交动作,下面结合代码实例进行一下介绍。