Page MenuHomePhabricator

Per-field inline validation and error messages for invalid input in lemma, language, spelling variant or lexical category field
Closed, ResolvedPublic5 Estimated Story Points

Description

As an editor using a JS-supporting browser I want to be informed about issues in my input as I type in order to understand where my data is invalid so I can fix it before submitting it.

Problem:
We need to show in-line error messages for each of the fields (lemma, language, spelling variant, lexical category) on Special:NewLexeme so editors can see right away what's wrong with their input.

Screenshots/mockups:
https://www.figma.com/file/XoYktoKEBnC0VIf1SRuxJK/Lexicographical-Data-UI?node-id=472%3A2223

BDD
GIVEN the Special:NewLexeme page
WHEN entering invalid data in one of the fields
THEN an error message is shown next to the field with problematic input data
AND the "Create Lexeme" button is disabled

Acceptance criteria:

  • error messages for invalid data are shown inline next to the problematic field
  • the "Create Lexeme" button is only enabled when all input is valid

Event Timeline

Lydia_Pintscher added a subscriber: Erdinc_Ciftci_WMDE.

@Erdinc_Ciftci_WMDE can you have a look please? We need to figure out which messages already exist.

@Erdinc_Ciftci_WMDE to check if we really want to disable the Create Lexeme button until all input fields have valid input.

sprint 8 planning
agreed to have the disable state until all input fields have valid input

Task Breakdown Notes:

  • The copy included in the table below is preliminary copy only. @Erdinc_Ciftci_WMDE will collaborate with engineer who implements these messages on the copy aspect.
  • @ItamarWMDE will copy over copy from T298153
  • Field errors will generally show by each field after submit, unless otherwise specified.
  • For the empty field errors we assume that fields are considered empty after performing a trim on their value
FieldErrorEventPreliminary Message
LemmaEmptysubmit"Lemma is required"
LemmaOver X Charsinput"Lemma is too long"
Lexeme LanguageEmptysubmit"The Lexeme Language is required"
Spelling VariantEmptysubmit"Spelling variant is required"
Lexical CategoryEmptysubmit"The Lexical Category is required"

Potential plan of action

  • For all the cases below: Ensure all messages are passed down to the Vue application from MediaWiki via ResourceLoader (Dependent on finalized copy) T308664.
  • For Lemma length T308654:
    1. Pass down the config variable or otherwise set value where the acceptable lemma length is determined into the Vue application
    2. Implement the error messaging logic on input event in the LemmaInput component
  • For empty cases T308660:
    1. Model the errors in the store somehow
    2. On submit evaluate and show the errors by their relevant fields
    3. On input clear the relevant error per field emitting the event
ItamarWMDE changed the task status from Open to Stalled.Jun 1 2022, 8:30 AM

Stalled on T308664

Lydia_Pintscher changed the task status from Stalled to Open.Mon, Jun 13, 9:01 AM

Unstalling because T308664 has been resolved.

From what I can tell this works fine now except for the error messages that are shown when the fields have invalid input. The error messages in these cases still say that the input is empty while it is not.

image.png (468×560 px, 43 KB)

image.png (402×560 px, 38 KB)