I currently am designing a settings/configuration menu and some of these pages have required fields. When the user leaves a required field empty, what should be the expected behavior when moving to a different menu? For example, in the image one of the required fields are empty. If the user wants to move to menu 1 while the required field is still invalid, should the user be allows to move menus?

enter image description here

I have considered preventing the user from leaving the page by having a "warning" pop up and telling them that they need to complete all mandatory fields before continuing. I also considered having a pop up that gives the user a warning that all mandatory fields must be completed, but if they wish to continue than all their changes will revert to the original. What is the better option? Is there another alternative?

2 Answers 2


You could allow the user to navigate to another tab, but disable the Submit Changes button and show an indication that the tab they left is in an error state. For example, if the user left Menu 2 unfinished to work on DHCP Range:

Menu 2 tab is in an error state when the user is working on another tab

Before they can submit changes "for good", they'll need to enter in all required fields across all tabs. If they don't, they should be warned that information will be lost.

  • This was my thought, but rather than disabling the submit button (which would benefit from explanation to the user), if they click submit they should be navigated to the first page that contains missing/malformed data - clearly marked - and given the chance to fix it. If they click Submit after that and there's more they need to do, they'd be taken to the next one, until the form is complete; then Submit would work as expected.
    – Mattynabib
    Commented May 22, 2023 at 18:02

If the forms are sequential, you should disable the submit button and provide an explanation of the error, as you are currently doing. However, users should still be allowed to navigate between menus.

For non-sequential forms, it would be appropriate (and probably advisable) to display a popup. Nonetheless, I would suggest retaining any information the users have already entered. They may need to refer to the incorrect information before inputting it correctly, and encountering empty fields would result in a poor user experience, especially when they only need to correct one item.

Nevertheless, the most crucial aspect is ensuring that the submit button remains disabled until all fields have been effectively completed.

  • The forms are non-sequential and I have already applied an "error" message when the user tries to submit when required fields are empty. When you say pop up, what do you expect the pop up to do? Should it be an error message that prevents the user from leaving the menu? Should it be a pop up where the user can revert their changes and then move on to a new page? Should I give them a warning but still allow them to move on and come back to their error later?
    – Gene
    Commented May 22, 2023 at 17:41
  • what you said here " I also considered having a pop up that gives the user a warning that all mandatory fields must be completed"
    – Devin
    Commented May 22, 2023 at 17:53
  • 1
    Given the non-sequential nature of the forms I don't love the "block the user from leaving until everything is right" idea as much... I lean more in the direction of decorating the menu item with any missing or malformed data (see below)
    – Mattynabib
    Commented May 22, 2023 at 18:04
  • @Mattynabib it's literally the same, only that with an icon (which you're correct, it's a good idea)
    – Devin
    Commented May 22, 2023 at 18:21

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.