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