Input field needs validation

[raghav4]

Describe the bug
Input fields need validation on the client-side, many fields are showing ambiguous behaviour,

To Reproduce
Steps to reproduce the behaviour:

1. Open Safari or Firefox browser.
2. Go to form and choose any Declaration Selection
3. Click on any field they can accept any value irrespective of what defined
4. See Error

Expected behaviour
It should prompt the user with a warning as a label

Screenshots

Desktop (please complete the following information):

• OS: MacOS Catalina
• Browser : [safari, firefox]

Note: This is a browser-specific issue hence a strict validation needs to be done

Here's a portion of it is being discussed, https://github.com/accordproject/concerto-ui/issues/24#issuecomment-589997344 but since Safari/Firefox doesn't enforce the user to enter 'typed' data validation needs to be done on almost all of the fields.

[jeromesimeon]

Would this issue overlap with / be partially resolved by
accordproject/concerto#160 addressing accordproject/concerto#157
?

[jeromesimeon]

I'm wondering how errors during validation are reported by the Concerto UI. Will it work with the Error logger in Cicero UI?

[mttrbrts]

Will it work with the Error logger in Cicero UI?

That's a great idea. We probably want inline errors for form fields, but having the format compatible with the Cicero UI ErrorLogger makes sense to me.

[jeromesimeon]

Will it work with the Error logger in Cicero UI?

That's a great idea. We probably want inline errors for form fields, but having the format compatible with the Cicero UI ErrorLogger makes sense to me.

Maybe @irmerk can provide suggestions. I think it might mean passing some error function as a prop? Then encapsulating the errors using the standard concerto exceptions.

[jolanglinais]

The ErrorLogger can take a function for when a user clicks on the individual error (originally for navigation to a clause in a contract, could be to redirect user to the concerto form), but otherwise just takes an error object. Currently it is only looking for modelError or parseError, but could be adapted for a new error.

[jeromesimeon]

The ErrorLogger can take a function for when a user clicks on the individual error (originally for navigation to a clause in a contract, could be to redirect user to the concerto form), but otherwise just takes an error object. Currently it is only looking for modelError or parseError, but could be adapted for a new error.

I think a distinct question is how does the Error logger gets notified of the error in the first place?

[jolanglinais]

It should be stored on some state above cicero-ui and passed down through props.