I am trying to find the best way to guide user to achieve their goal (Submitting a course) without the need to force users to make a mistake then correcting them.
In this design:
User lands on this page "Course Details" (option on the left). Here the user needs to fill out some information (some are mandatory and some are not).
Please notice that the "Submit" button is disabled.
User must select the "Course Date" option on the left. Must set a date. Only after the date is set, the "Submit" button will be enabled and user can submit. Meaning all other options are optional. The required ones are on the "Course Details" and "Course Date" options.
Submit button has to be visible on all pages (Whatever option you chose on the left displays a page on the right with either mandatory fields, optional fields, or both. So user can submit at any point, no matter the page they are on) AFTER all required data is provided, button gets enabled and user can submit (in this case required data is only under Course Details&Course Date).
My question is: While user is on the "Course Details" page, how can I let them know that the "Submit" button is still disabled (Although they filled out all mandatory fields at the "Course Details" page) because they still must go to the "Course Date" option and set a date, so the "Submit" button gets enabled?
So here is what I thought of doing, Either:
I put an asterisk next the "Course Date" option and I add a help icon next to the disabled "Submit" button, guides the user to go set the date and then they will be able to submit.
Help icon disappears once the button is enabled.
I put an asterisk next the "Course Date" option and I keep the "Submit" button enabled all the time, and once user clicks it before they set the date under the "Course Date" option, I show a message guides users to set a date then submit. (This way I am kind of forcing the user to make a mistake trying to submit then teaching them that they need to set a date first then submit)
I know the design is not great to start with, I appreciate better ideas!
Please note that this is not a finalized design, this design is just a sketch to explain the case, so no focus on fonts, or colors matching ...etc.
Update: (to claify more)
"Submit" button has to stay visible all the time like in the picture provided. As users do not need to fill out all data in all pages. Think about it as u click a button "Create new course", takes u to this page (default = Course Details page), U can fill out all data on all pages and submit. But u still can fill out "only" required data (in this case only at the Course details and date pages) and Submit. What if there are other required data on some other pages that each has several required data but it cannot be placed on the same page as the Course Details page. So how will u handle that? Think of the design as several pages each has specific data some pages has required data while some has optional. User can Submit at any page (all required data is provided).
One more point, there should not be a forced flow. Meaning, there should not be a "Next" button at each page to take the user to next page, as some users know what they need to fill out so they do not want to go to every single page. Some returning users might only want to provide some data (including the required data) and submit. So they want to keep it that way.