[FIXED] Why isn't the false condition displaying for checkValidity()?

Issue

When the search field is empty, the error message should say 'input empty', but it doesn't? I don't understand why it doesn't work. It displays the default browser tooltip that shows on a required field instead.

Snippet

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>

Solution

You need to add novalidate attribute in form tag

Note: also I improved your condition by using a ternary operator

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>

Answered By - dippas

Answer Checked By - Timothy Miller (PHPFixing Admin)