How to prevent form validation error message but still validate?

Question

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.

You can remove `required` and that pop-up won't appear, but then users will be able to submit the form with this input empty. Is that the functionality you want? — WOUNDEDStevenJones, Mar 03 '22 at 22:25
While it's possible (see my answer), it's quite unconventional. Form validation is usually done with JavaScript. — code, Mar 03 '22 at 22:27
Possible dupe of [how to hide html5 validation popup message](https://stackoverflow.com/questions/35402669/how-to-hide-html5-validation-popup-message) — code, Mar 03 '22 at 22:30
"here is what I want to remove" can you explain what functionality you're looking for then? The pop-up bubble is a result of the `required` property on the `input` field. But it sounds like you also don't want them to be able to submit a blank value? Then custom JavaScript will be needed to respond to the form submit. See https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#validating_forms_using_javascript as an example, or https://stackoverflow.com/questions/18851684/how-do-i-validate-this-html-javascript-form-onsubmit — WOUNDEDStevenJones, Mar 03 '22 at 22:31
@WOUNDEDStevenJones I'm trying to do what Google did. Whenever you submit a blank value into the search bar, it doesn't let you submit, but still gives no validation message. — ArcadeSmasher, Mar 03 '22 at 22:35

score 1 · Accepted Answer · answered Mar 03 '22 at 22:23

1

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.

answered Mar 03 '22 at 22:23

code

5,690
4
17
39

This doesn't work for me. it still lets me enter a blank value when I submit – ArcadeSmasher Mar 03 '22 at 22:27
1

For the record, in Firefox it still pops up the validation bubble but with a blank error message. – WOUNDEDStevenJones Mar 03 '22 at 22:27
@WOUNDEDStevenJones okay. I tested this on Chromium and it worked fine; I guess this only works for that. – code Mar 03 '22 at 22:28
Oop never mind it's working. – ArcadeSmasher Mar 03 '22 at 22:31
1

Doesn't `oninvalid="event.preventDefault()"` works better ? – Charles.C Mar 03 '22 at 22:45

WOUNDEDStevenJones · Answer 2 · 2022-03-04T20:01:00.740

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>

How to prevent form validation error message but still validate?

2 Answers2