What's the best way to implement minimum character length for a search box?

 

(At the moment I'm trying to stop the search results from showing all possible results when someone simply clicks Search, without having typed anything.)

 

 

Should we use one of the following examples, and then use CSS to get rid of the red border around the search box in some browsers? Or do you know of other ways?

 

<input pattern=".{0}|.{8,}" required title="Either 0 OR (8 chars minimum)">

 

Thanks

If you're declaring HTML5 for your DOCTYPE then you could use the "required" parameter, that will stop the form field from being submitted unless it has a value.

<input type="search" name="keywords" value="" required>

Edited February 12, 20179 yr by BlueDreamer

Thanks BlueDreamer, that's quite simple. I'll use that.

(It's a shame that some browsers add that red border, but it's no big deal.)