0
262
ViewsHow to prevent form validation error message but still validate?
I have looked all over the internet to solve this but can't find any answers. If I am not clear, here is what I want to remove:
Example code:
<form action="search.html" id="form">
<input type="text" placeholder="Search..." name="s" id="s" required>
<button type="submit">Submit</button>
</form>Also, for the <input type="">, is it better to put type="search" rather than type="text" for what I'm doing?
If anything other than HTML needs to be used, no jquery if possible please.
2 answers
Answer question0
You can use setCustomValidity:
<form action="search.html" id="form">
<input type="text" placeholder="Search..." name="s" id="s" oninvalid="this.setCustomValidity(' ')" required>
<button type="submit">Submit</button>
</form>I'm not sure why you have to specify a space (" ") as the validity message, but it apparently gets ignored if you apply an empty string.
0
If you want it to act like Google, then you can listen for the submit event on the form, and then use .preventDefault() to prevent the form from submitting if the input value is empty. See https://stackoverflow.com/a/8664535/1499877 for another example.
form = document.querySelector('form');
input = document.querySelector('input');
form.addEventListener('submit', function(event) {
if (input.value == '') {
event.preventDefault(); // prevent the form from submitting
}
});<form>
<input type="search" />
<button>
Submit?
</button>
</form>Another option with slightly better user experience is to disable the button by default, and then enable it when the text input field has some value. This at least provides the user with a little feedback (the button becomes enabled) when they enter something in the input field.
input = document.querySelector('input');
button = document.querySelector('button');
input.addEventListener('input', function(event) {
if (input.value == '') {
button.disabled = true;
} else {
button.disabled = false;
}
});<form>
<input type="search" />
<button disabled>
Submit?
</button>
</form>