为什么checkValidity()不显示假条件？

Question

当搜索字段为空时，错误消息应该说“输入空”，但不是吗？我不明白为什么不管用。它将显示默认浏览器工具提示，该提示将显示在所需字段上。

片段

​

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);

<form id="search-form" class="search-diets-form">
  <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>

​

Answer 1

您需要在novalidate标记中添加form属性

注意:我还通过使用三元操作符来改善您的状况。

​

const searchForm = document.querySelector('#search-form');
const inpObj = document.getElementById("id1");
const errorMsg = document.getElementById("error-message")

const searchFormSubmitted = e => {
  e.preventDefault();
  errorMsg.innerHTML = inpObj.checkValidity() ? "input is ok" : "input empty";
}

searchForm.addEventListener('submit', searchFormSubmitted);

<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>
<strong id="error-message"> </strong>

​