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)?

  • When you talk of "removing an option" from a multi-select drop-down, are you meaning deselecting an option? (As opposed to some form of editing/customisation process so the option no longer appears in the list). – TripeHound Jul 19 '20 at 11:07
  • @TripeHound Yes deselect. I've should had say deselect instead of remove. My bad for not being more precise. I've updated the title because of that. – Luis Averhoff Jul 19 '20 at 16:16
  • 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

Your Answer

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

Browse other questions tagged or ask your own question.