I want to disallow users from searching without a query string (at least one character). To achieve this, I tried to disable the search submit button when the search box is empty, and restoring the enabled state when the user inputs something.

The problem is that the search engine appears to be disabled. Then I put a label inside the search box (placeholder), but since the colors of text are grey, it still has a "disabled look".

Without using labels, which option should I follow? I already think on some alert box to alert the user, but it seems to be too intrusive.

Related: Search box must contain at least three letters - how to convey? but it uses labels.

  • 1
    Just to get this straight - the user clicks in the search box, leaves it empty, then clickes the submit button, then you disable the search box and button and enter a placeholder text into the disabled search box, which leaves the impression of the search being frozen disabled alltogether? What happens when the user focuses into the search box and starts typing?
    – kontur
    Dec 28, 2012 at 11:53
  • Right now, the button is disabled by default. When the box got focus, the placeholder disappears and the button remain disabled until the user types something. The problem is that, without interacting with the search box, it may appear as frozen/disabled, because the submit button is disabled, and the placeholder text is grey.
    – André
    Dec 28, 2012 at 18:55
  • Can I ask why you're not just returning an "all results" page? You can filter it by whatever criteria you choose.
    – NotSimon
    Dec 28, 2012 at 19:02
  • @Simon, the idea is to disallow an user from searching without entering text in the search box. It's only from the usability view, since the results page is ready to handle empty query strings, resulting in an error.
    – André
    Dec 28, 2012 at 21:45
  • @André but why limit the user if the functionality is available?
    – NotSimon
    Dec 28, 2012 at 21:52

3 Answers 3


Based on your answer in the comments, I would suggest the following:

1) Initial state: Box is enabled, button is enabled, optionally have a descriptive text in the search, like "enter search words", or "enter min. 3 characters".

2) User focuses in the text field: Whatever system generated text is in the textbox gets cleared, the button, if it is disabled from faulty input as described in 3), gets reenabled

3) User presses button without entering any or too few characters: Box is enabled, button gets disabled, text in the search is a reminder to "enter min. 3 characters", nothing gets submitted and when the user clicks into the textbox the system generated text is cleared.

This way the search appears enabled initially, and also as soon as a user attempts to enter new text after erroneous input. You can use the text box for messages to guide and inform the user.

  • I tried this, and worked great. The form doesn't give the idea it is non-fnuctional. The button is only disabled in case of error, telling the user something went wrong with the query (assuming empty query). Thank you!
    – André
    Dec 28, 2012 at 21:49
  • +1 It's worth noting that some users (who are new to the Internet, have learning disabilities or are young, for example) will have difficulty associating the text input to the button, even if they are placed adjacently. If you imagine that you have never learned this pattern, you may instinctively believe that "Search" is just a button that brings you to that functionality, in the same way that "Open" in a Word processor opens a file browser, but doesn't actually open a file. If the user enters no search term, send them to a page showing nothing but provide a giant input and search button.
    – Brendon
    Dec 29, 2012 at 20:58
  • @Brendon totally agree. Compromising on interface complexity is something designers tend to try lightly, because they are so used to the type of elements in UIs - unlike some of the potential users of the interfaces they design.
    – kontur
    Dec 29, 2012 at 21:06

In case user types nothing and hits the submit button then you can display a message in your search result like zero result found or no results found..

Alert box is definitely not a good choice..but yes you can look for highlighting the search field alongwith inline display message as shown below:

enter image description here

  • It's a good idea, but it uses labels, which I stated that I prefer not to use in this case.
    – André
    Dec 28, 2012 at 21:46

Something you might consider. The search dialog box could have greyed out text of Enter Your Search String Here... If text is entered in the box the text goes from a grey font to a darker enabled one. If they remove the text the prompt text in the greyed out color is replaced. Just a thought.

  • Hey @ojblass, this doesn't really answer the question because 'placeholder' text as you've described doesn't disable a search with no query. Dec 28, 2012 at 22:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.