checkValidity()校验时false分支未生效 显示浏览器默认必填提示

表单输入框添加required属性后，浏览器会在submit事件触发前优先执行原生表单校验：如果输入为空，会直接弹出默认的必填提示tooltip，不会触发你绑定的submit事件回调，因此你写的checkValidity()判断、自定义错误文案赋值逻辑完全没有执行。

给form标签添加novalidate属性，禁用浏览器默认的原生校验行为，即可让提交事件正常进入你写的回调逻辑，自定义错误提示就能正常显示。

修改后的核心代码 #

HTML部分仅需给form标签加novalidate属性即可，其余结构无需调整：

<form id="search-form" class="search-diets-form" novalidate>
  <input id="id1" type="text" value="" placeholder="Search.." name="search" required>
  <select name="healthList" id="healthList">
    <option selected="selected" class="health-option">Health options</option>
    <option class="health-option" value="dairy-free"> Dairy free </option>
    <option class="health-option" value="alcohol-free"> Alcohol free </option>
    <option class="health-option" value="egg-free"> Egg free </option>
    <option class="health-option" value="fish-free"> Fish free</option>
    <option class="health-option" value="low-sugar"> Low sugar </option>
    <option class="health-option" value="vegetarian"> Vegetarian </option>
  </select>
  <select name="caloriesList" id="caloriesList">
    <option selected="selected">Max number of calories</option>
    <option value="300"> 300 </option>
    <option value="400"> 400 </option>
    <option value="500"> 500 </option>
    <option value="600"> 600 </option>
    <option value="700"> 700 </option>
    <option value="800"> 800 </option>
  </select>
  <button type="submit">Search recipes</button>
</form>
<b id="error-message"> </b>

原有JS逻辑不需要修改，添加novalidate后即可正常运行：

const searchForm = document.querySelector('#search-form');

const searchFormSubmitted = (e) => {
  e.preventDefault();

  const inpObj = document.getElementById("id1");
  if (inpObj.checkValidity()) {
    document.getElementById("error-message").innerHTML = "input is ok";
  } else {
    document.getElementById("error-message").innerHTML = "input empty";
  }

}

searchForm.addEventListener('submit', searchFormSubmitted);

补充说明 #

• novalidate属性只会关闭浏览器默认的校验提示弹窗，不会影响checkValidity()方法的校验能力，依然可以用原生校验API判断输入合法性。
• 如果需要保留原生校验规则、只替换提示样式，可以监听输入框的invalid事件，调用e.preventDefault()阻止默认提示弹出，再写入自定义提示逻辑。

内容的提问来源于stack exchange，提问作者Denby101