recogito/recogito-client-core

Form validation mechanism for widgets

Closed this issue · 6 comments

We need to validate the required input fields while submitting the dialog. Is it possible to add the required attribute for the widgets like comment, tag, etc?

Best Regards.

I think the most straightforward way to build this is to validate while the user types/selects. The design & functionality of the widget is up to you, so you could validate on the fly, highlight the input field, display an error message etc.

If you want to validate after the user hits ok, that might be trickier. You'd somehow need to inspect the annotation bodies, re-select the annotation so that the editor pops up again, etc.

I mean, I need to force the user to type the required input fields. We can use css to show which fields are required. I think we need an event before the OK button click event to check that all required field values are not empty. As you mentioned the anno.getAnnotations() must be checked and if there is an empty field the editor dialog must not be closed and keep the current state. If I find an event to do it then I can change the css styles to warn the user. Is there another way to do this?

image

Ah - sorry, now I understand what you mean! Yes, a good suggestion. But not trivial... I wouldn't know a workaround for hacking this with the current codebase, at least not from the "outside". A clean implementation would require some kind of addition to the core plugin API, I think. A communication mechanism between editor and widgets specifically designed for validation. I'll put that on the list, but would need to think about how to design that...

Could a html form element wrapping the input fields be used for this purpose?

Or a required attribute in widget while defining the widget features, so it checks required input fields and validates before OK buton click event. (imho)

It's not that easy, unfortunately. There would need to be an explicit validation mechanism that: i) hands the annotation to the widget for validation; ii) blocks the OK button in case any of the widgets says the annotation is invalid. (Similar to how widgets now can control whether an annotation is allowed to be delete-able or not.)

Form validation will remain up to the widgets to implement. A generic form widget (with validation included) could be scope for a future plugin. I created an issue here:

annotorious/annotorious-v2-plugins#10