Basic validation

[VojtechLunak]

Implements also #153.

InputAnswer

• PATTERN attribute introduced to JSONLD question object ~ Regex expression
• HAS_VALIDATION_MESSAGE contains the message that shows when there is invalid input
• only "text" input (which is default) is checked for pattern

DefaultInput

• render react-bootstrap component in isInvalid state and show error message

Further analysis

@blcham


ValidatorFactory

• used in Question component in _handleChange method
• checks if answer is required by looking for Constants.REQUIRES_ANSWER
  • if answer is required, than it just looks if answer has value and sets Constants.HAS_VALID_ANSWER to true, else it sets it to false and sets Constants.HAS_VALIDATION_MESSAGE as well
  • if answer is not required, it sets Constants.HAS_VALID_ANSWER to true by default

DefaultInput

• react-bootstrap uses underlying HTML input's restrictions to define required field, patterns, min, max values, input lengths and so on
• these restrictions can be checked at different times (onChange, onSubmit, onBlur)
  • by default, HTML input's validity is checked onSubmit (when the submit button of the form is clicked)

[netlify]

✅ Deploy Preview for s-forms-kbss ready!

Name	Link
🔨 Latest commit	6a690b7
🔍 Latest deploy log	https://app.netlify.com/sites/s-forms-kbss/deploys/65e5ed62d639ff000866baa9
😎 Deploy Preview	https://deploy-preview-207--s-forms-kbss.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[VojtechLunak]

@blcham test

There are two cases of validation to consider.
One way is onChange for each input.
Other way is to save onSubmit.

And then there is the option of combining these two.

[VojtechLunak]

With the ValidatorFactories, there might be a problem when chaining different data rules and requirements.

Imagine these situations:

• required answer + wanted pattern matching
  • currently, there is no mechanism to chain two validators to one Question (setting Validator code); we can only validate required answer or check answer's pattern
• not required answer + when answer is present, check it for pattern
  • currently, this is doable by applying the MatchesPatternValidator (code)

Plus there are code duplicities in ValidatorFactory, I might propose cleaner solution later.

Abstract proposal for chaining multiple rules:

• correct data definition in the JSONLD object
• attaching multiple validations to one question and validate onChange

Checking data types is done by correct data type definition in JSONLD when generating form, and then DefaultInput renders the form field with corresponding React-Bootstrap component, that already has data type checks (number, date, ...).

For example:
Answer is required and has a pattern.

Scan flag 'required' and 'pattern' from JSONLD data structure.

Then onChange do validation for each flag via Validator.
For this solution to work, there must be some rule for specifying the most important flags for setting their execution order.

[blcham]

@VojtechLunak I rebased your implementation of validators but it fails in tests

[blcham]

• it is essential to check if the required values are working and how
• try to draw how validation works
• make simple test cases in demo

Less important:

• validation by regexp could be evaluated immediately as it is now, but not being that aggressive (by showing red text, but rather some kind of warning). Only on the input field focus lost it should show an error (red text).

[blcham]

---

1. Proposal

We need only following properties:

• for saying what and have should be validated
  http://onto.fel.cvut.cz/ontologies/form/requires-answer-if
  http://onto.fel.cvut.cz/ontologies/form/requires-answer
  "http://onto.fel.cvut.cz/ontologies/form/requires-answer-to-complete
  http://onto.fel.cvut.cz/ontologies/form/requires-answer-to-complete-if

• for expressing in "what color" it should be shown
  "http://onto.fel.cvut.cz/ontologies/documentation/has_required_answer"
  "http://onto.fel.cvut.cz/ontologies/documentation/has-answer-contributing-to-completeness";

---

2. Proposal:

We need only following properties:

• for saying what and have should be validated
  http://onto.fel.cvut.cz/ontologies/form/requires-answer-if
  http://onto.fel.cvut.cz/ontologies/form/requires-answer

• for expressing in "what color" it should be shown
  question form:used-only-for-completeness true .

---

@LaChope we agreed on 2. Proposal

[blcham]

See my comments. Moreover, see my comments from testing:

[LaChope]

See my comments. Moreover, see my comments from testing:

@blcham These are the messages from the pattern validator. I am not sure how to make better messages, it used to be the regex displayed but IMO it does not make sense to show it to the end user. This message is the same one used in Google Forms but I agree that it could be more explicit, do you have any recommendations?

My argument is that if we say something like "The pattern is not matched" or something similar, the user will expect to have the pattern, but regex will not be understandable. "Enter a valid answer" to me is not specific on purpose and relies on the user to understand the question.

[LaChope]

Validation message should support custom message, if no custom message, show regex

[blcham]

Consider my comments. Moreover, I have a suggestion to meet over !important.

[LaChope]

Consider my comments. Moreover, I have a suggestion to meet over !important.

I was able to fix it by simply adding the properties to :focus (see b77c564).

[blcham]

maybe should not be here?

[LaChope]

Actually yes, sorry I was confused