表单使用A标签当提交按钮required oninvalid属性无法校验

我在使用A标签当成提交按钮的时候， required  oninvalid属性无法校验，为什么？代码如下

<input    type="tel"    name="phone"    required    oninvalid="setCustomValidity('请输入您的电话');"    oninput="setCustomValidity('');"    placeholder="请输入11位手机号"  >

<a    onclick="document.getElementById('myform1').submit();" >提交</a>

原因：

使用<a>标签通过document.getElementById('myform1').submit()提交表单时，无法触发 HTML5 原生表单验证的核心原因是：手动调用表单的submit()方法会跳过浏览器的原生验证流程，而只有通过表单的原生提交行为（如点击<button type="submit">、<input type="submit">）才会触发验证。

解决方法：先手动验证，再提交表单

方法 1：手动验证 + 显示错误提示（推荐）

修改<a>标签的onclick事件，先调用reportValidity()验证，通过后再提交：

<form id="myform1">  <input type="tel" name="phone" required     oninvalid="setCustomValidity('请输入您的电话');"     oninput="setCustomValidity('');"    placeholder="请输入手机号"  >  <a href="javascript:;" onclick="submitForm()">提交</a> </form> <script> function submitForm() {  const form = document.getElementById('myform1');  // 手动触发验证：若验证通过则提交，失败则显示错误提示  if (form.reportValidity()) {    form.submit(); // 验证通过，执行提交  } } </script>

方法 2：简化版（直接在 onclick 中写逻辑）

如果不想单独写函数，也可以直接在<a>的onclick中完成验证和提交：

<a   href="javascript:;"   onclick="const f=document.getElementById('myform1');f.reportValidity()&&f.submit();" >  提交</a>