Design an "Incorrect Field Indicator" for Tag Generator Wizard

[smsada]

Overview

We want the end-user to know what to include in the fields and what is wrong so that the information inputted can be properly processed by our back-end to add their Project to the Repo.

Action Items

• Mock-up red outline indicator of fields that are incomplete

  • Include Screenshot in comments so it can be referenced by Developers

• Mock-up messages about why a field is incomplete

  • "Field cannot be empty"
  • "Invalid Organization"
  • "Invalid URL"
  • "Invalid E-mail"
  • Include Screenshot in comments so it can be referenced by Developers

• Grey out the next button

  Intended greyed-out button look

  

  • Include Screenshot in comments so it can be referenced by Developers

Resources/Instructions

• Issue from Expert Interview: Gio #1111
• This is a dependency for Implement an "Incorrect Field Indicator" for Add Org Form in Tag Generator Wizard #1198

[smsada]

• Have a header over Parent Organization similar to this below

  Parent Organization example how it should look

  

[smsada]

• Incorrect Field indicator is implemented after the 2nd page of this pop-up is cleared
  
• Doing validation live increases strain and API calls