Implement basic validation

[LaChope]

According to kbss-cvut/s-forms#153, record-manager-ui should use this validation as follows:

Record page

• If the form is invalid -> Can't save, can't complete, the buttons should be disabled
• If the form is valid but incomplete -> Can save, but can't complete.
  • On click on "complete" button, should navigate to the first incomplete question and should be emphasized
  • Possibility to add a progress bar
• If the form is valid + complete -> can save and complete

Dashboard

• Add incomplete questions to list of records screen #127

@blcham

[blcham]

I suggest reformulating issue in following way:

-  If the form is invalid -> Can't save, can't complete, the buttons should be disabled
=>
- If the form is invalid -> Can't complete, the button should be disabled

....

Moreover, the idea is to unify behavior around validation for save and completeness:

• Make the save button and complete button behave almost the same
  • I would enable the save button even if the form is invalid. Otherwise, the user will never be able to easily find out that he did not fill in all questions. He will see the disabled button, but he will not know why, especially for longer forms. If we make a tooltip of the disabled button with the text "Disabled because some of the required questions are not filled in!" he might not find this message. Moreover, it is even worse in a mobile version as it is impossible to show the tooltip.
    • On the save/complete button, which cannot be proceeded, we should show the user a message "Could not save due to validation error"/"Could not complete form due to missing answers."
    • Moreover, to improve, we can show some kind of warning icon within the button to indicate that it is invalid [1] or some kind of progress bar/percentage of completeness next to complete or inside of the complete button [2].
  • When the user hits the button, I suggest showing a report containing the list of invalid/incomplete answers ordered by precedence in the form. Clicking on the item within the list should jump to the question and emphasize all questions of the same category (required to save or required to complete). The idea here is that we will need to implement this functionality in the tooltip for icons anyway so why not reuse it for buttons as well.
    • Moreover, to improve, we can make variants of this implementation for different cases later. E.g., if there is only one question or the form is small enough to be visible as a whole on the screen, we can navigate to the first question and emphasize all questions of "the same validation error category" [3].
• Lost focus should show a validation message -- this should hold for both required to save and required to complete questions.

I suggest implementing the behavior as described above while leaving [1], [2], and [3] to future releases (unless it is very hard to implement).

[LaChope]

Simple variant for AVA:

• Visualize in the form only all invalid/incomplete questions when Save/Complete button is hit
• do not put a progress bar
• do not show tooltip of incomplete status

[blcham]

@LaChope i reformulated your last comment :)

[LaChope]

How basic validation works in SForms:

The validator is triggered only when the input field is changed, which means that when the form is mounted for the first time, if some answers are invalid, it will not be displayed as invalid (which is wanted behavior, we want to have it only on focus). However, this means that when the form is loaded from record-manager-ui (after being saved), invalid/incomplete answers will not be shown.

Here are some ideas on how to implement the solution:

1. In record-manager, persist "form/has-valid-answer" and "form/has-validation-severity" question property to the server.
   • Pros:
     • No need to change SForms
     • Invalid is shown only on focus when the record is loaded for the first time
     • When loading the record after it was saved, it will show invalid/incomplete answers
   • Cons:
     • We need to save, even if the form is invalid
     • Need to change the backend model
     • If no validation message is set, the default one will not be used (validator needs to be triggered first)
2. In SForms, use the state of the record as a flag to decide if invalid should be shown only on focus (new record) or when the component first mounts (saved record).
   • Cons:
     • Very specific implementation related to record-manager
     • How to tell record-manager if the form is invalid? (how to tell if it is possible to save or not?)

@kostobog @blcham

[kostobog]

I think that record manager should be able to call s-forms validation which will return a list of validation errors containing the invalid field and the type of validation error, e.g. invalid and missing.

Here is a suggestion how to call SForms validation from record manager:

• implement validation method in SForms.validate() component which returns a list of validation errors, each containing an invalid field and the kind of validation error, e.g. invalid and missing.
• in record manager call SForms.validate using the ref to the SForm component, e.g. in component Record this.recordForm.validate.

Some other notes:

• user cannot save form with invalid answers. Also invalid answers are highlighted.
  • may be this includes required answers for which the user focused and left the respective field without entering an answer?
    @LaChope @blcham

[blcham]

I do not understand some of the ideas, so we need to discuss them in detail, but from what I understand:

• I prefer not to save validation output to the server. Not sure how it is useful now to save it.
• [1] SForms should provide a method/parameter that:
  • return all / show all required to save/invalid questions (i.e. it changes the state of the record in SForms)
  • return all / show all required to complete questions (i.e. it changes the state of the record in SForms)

If this is done, we just need to trigger [1] at the correct moment when a workflow button of record-manager-ui is hit (e.g., button "Complete" or "Save")

@LaChope @kostobog

[blcham]

Options to implement validation in Record Manager UI:

1. implement a specific method like SForms.validate()
2. implement as properties of SForms

---

this.refForm = React.createRef();
this.refForm.current.validate(evaluateCompleteness = false);

BTW, RecordForm has state isValid.

It is possible to think about implementation of generic visitor of all questions (would be used for both, getting list of invalid/incomplete questions and changing "in/valid" state of questions)

process_question: (question) => object

Example of processors:

showRequiredToSave(question) {
    question.validate();
}

collectRequiredToSave(question) {
    if not_valid(question) { 
      listOfFailedQuestions.add(question)
   }
}

It would be something like <SForms showAllInvalid=true/> and <SForms showAllIncomplete=true/>.

• cons: not really useful to find out which questions are invalid or find out if the validation went well/wrong.

[blcham]

Also get inspiration from https://www.react-hook-form.com/