inputs: add form validation functionalities

[janivo]

Feature Request

When using our input elements (ino-input, ino-select, ino-checkbox, ...) I want to be able to use them in a form with the relevant functionalities.

Required

Add the required attribute to all input elements and check if an invalid state is already implemented

• [x] ino-autocomplete
• [ ] ino-checkbox
• [x] ino-datepicker
• [x] ino-input
• [ ] ino-input-file
• [ ] ino-radio(-group)
• [ ] ino-range
• [x] ino-select
• [ ] ino-switch
• [x] ino-textarea

open a new issue, if there is no visual indicator for an invalid state

Focus & Blur

For some validation mechanisms, it is necessary to trigger the blur & focus methods of the input components.

• [ ] ino-autocomplete
• [ ] ino-checkbox
• [x] ino-datepicker
• [x] ino-input
• [ ] ino-input-file
• [ ] ino-radio(-group)
• [ ] ino-range
• [ ] ino-select
• [ ] ino-switch
• [x] ino-textarea

Validation States & Message

As is the case for the ino-input, we should provide properties to mark the component as invalid from the outside, following our controlled components concept. Furthermore, it is necessary to provide a way to show custom error messages as well.

• [x] ino-autocomplete
• [ ] ino-checkbox
• [ ] ino-datepicker
• [x] ino-input
• [ ] ino-input-file
• [ ] ino-radio(-group)
• [ ] ino-range
• [x] ino-select
• [ ] ino-switch
• [ ] ino-textarea

Summary

In the end, every input component should have the following methods/properties (names are WIP):

• required
• setFocus()
• setBlur()
• error
• helper (maybe rename to helperText?)
• helperPersistent
• helperValidation
• showLabelHint

for an explanation of each property, have a look at the API of the ino-input element

[janivo]

306 should be used as a starting point for the Focus & Blur functionalities

[janivo]

This feature might have a big impact on this story: #1232