H5 原生Form表单校验使用

默认情况下form表单会带有校验功能，例如下面代码：

<form id="formId">
 <input type="text" name = "name" required >
 <button type="submit">提交</button>
</form>

input不输入任何值，直接点击提交按钮，input会 提示该项目必填 此为原生form的校验功能。

修改代码如下：

<form id="formId">
 <input type="text" name = "name" required >
 <button type="button" id="formBtn">提交</button>
</form>
<script>
//绑定按钮点击事件
document.querySelector('#formBtn').addEventListener('click',function (e){
  $('#formId').submit();
})
</script>

修改后表单能提交，但是失去了自带的校验功能。

如何恢复？修改代码如下：

<form id="formId">
 <input type="text" name = "name" required >
 <button type="button" id="formBtn">提交</button>
</form>
<script>
//绑定按钮点击事件
document.querySelector('#formBtn').addEventListener('click',function (e){
  let ck = document.querySelector('#formId').checkValidity();// true/false
  if (ck === true){
        document.querySelector('#formId').submit();
   }
})
</script>

重点代码：

let ck = document.querySelector('#formId').checkValidity();// true/false

Jquery 同理参考

over

form校验 form form提交校验 form校验结果

https://blog.xqlee.com/article/2502262039444273.html