Before I ask my question, I feel like I need to provide some context.

The application that I'm working with has a form for executing queries. This form has the following components:

  1. inputs and textareas - native html elements that use the native constraint form validation api that the browser provides.

  2. Single and multi select dropdowns - These are custom select components and do not use the native select html tag that browser provides and need their own form validation mechanism.

Each field in the form is either required or optional(The number of fields that are required or optional depends on how the query was created in the server. There could be more optional fields than required and vice versa).

On top of that, each select dropdown can very well have a default option(s) that is/are selected when the form is rendered i.e option(s) that is/are programmatically chosen.

Single Select Dropdown:

  • if it is not required, there should be a blank/empty item added to the list. (This is not sent when a query is executed).

  • if there is a defaultValue, select it; otherwise, select the first item in the list (either 'blank' if not required or 1st choice - so that we satisfy the required constraint)

Multi Select Dropdown:

  • if a parameter is required and there is no defaultValue, select all items in the list (default to "select all").

  • if a parameter is not required and there is no defaultValue, unselect/clear all items (default to "select none").

With all of that context, I'll now get into my main question.

For dropdowns that are required, is it to intrusive or restrictive to prevent the user from having no options selected to stop them from accidentally submitting a query that would 100% fail? I would still allow the user to deselect options from the dropdown assuming deselecting that option still leaves you with at least one option selected.

Of course, if they try to deselect from a dropdown with only one option selected, a popup message, hint etc would render and inform the user that this field cannot be left empty and would suggest them to replace this option with another one.

Obviously for dropdowns that are not required they can leave it empty or add/deselect however many options they want.

What do you guys think about this? Would this be a good validation mechanism to add to my dropdown components when they are required(both single and multi-select)?

  • From the point of view of accessibility (especially keyboard-only users), drop-downs are a bad choice, and multi-select drop-downs are simply not done. – Tsundoku Jul 19 '20 at 20:45
  • @Tsundoku Well the form consist of a bunch of parameters and some of these parameters range from having 4-5 options to around 12-13 options(give or take) the user can choose from and these options are unknown to the user. That is why I went with dropdowns as the number of options is not huge. I've also already taken steps to ensure that the dropdowns are keyboard accessible. If the number of options for the majority of these parameters were small(2 - 4) options, I would have went radio buttons/checkboxes. – Luis Averhoff Jul 19 '20 at 22:36

I think the answer should probably be based on the overall validation behaviour of the entire form, and not just be based on the dropdown UI element.

So if you allow mandatory input fields to be empty (with appropriate validation message) and also allow input to be provided and then cleared, these rules should ideally be applied to the dorpdown input as well.

On the other hand, if you don't allow them to be empty and must have an input in there (whether it is a default value or user selected), then you should be consistent so that there isn't any confusion for the user.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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