Cuando el campo de búsqueda está vacío, el mensaje de error debería decir 'entrada vacía', pero ¿no es así? No entiendo por qué no funciona. En su lugar, muestra la información sobre herramientas predeterminada del navegador que se muestra en un campo obligatorio.
Retazo
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>Debe agregar el atributo novalidate en la etiqueta del form
Nota: también mejoré su condición usando un operador ternario
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>