Feature Proposal: Show validation error message beside form field title

[iosdev-republicofapps]

Hi,

Really enjoying Form, thanks again for making this available!

I notice that when form fields fail validation, they turn to red, which is great. But although the color is red, it doesn't show what is wrong, only that something is wrong with the field. I thought about showing validation failures in an alert, but that would require the user to remember those failure messages and then go correct them.

What about adding an option to show validation failures in red text appended to the field's title if the field has a title. The validation failure message would disappear from the field title when the form passed validation. Or would it need to disappear as soon as the field's current value passed validation (as feedback that the user's changes were working)? That might be complicated for cross-field validations.

Just curious what your thoughts were about this and if you had any suggestions? I'm happy to help with a PR for this.

Thanks.

[3lvis]

Hi @iosdev-republicofapps,

In our app we have a similar feature, the difference is that we didn't add the error messaging to the form fields because it would mean that the layout would change and this could be problematic since you could be typing the currently focused field would jump to a different position, bothering the user.

The way we solved this issue was by having an "error indicator" in the toolbar with a table view that will list all the validation errors, tapping one validation error would focus the current form field. Something like this:

[iosdev-republicofapps]

Thanks @3lvis that's a good idea.

I would try that, but my concern is that I want to be able to see the validation errors when the keyboard is showing because that's when the user is fixing the validation issues and I feel that they'd like to see the validation errors then. I'm worried that the keyboard would cover the validation error popover ... and on iPhone I don't have access to UIPopover.

I hear your point about the layout potentially changing if I show the validation error inline with the title.

I'm not sure what to do ... any ideas? Thanks again! :-)

[3lvis]

Hi @iosdev-republicofapps,

On an iPhone, you could probably use a UIAlertController or a custom modal screen. Adding inline validation error might be more work than it sounds, or do you have some suggestions on how we could do this without messing up with the layout?

Another option is to use the "info" field in the form field, this info field shows a small pop up when the user focuses on the field.

[3lvis]

Another reason for why only displaying the validation errors inline might be a bad idea is because if it's a long form and the fields that are failing are off-screen the user basically has to scan the entire thing to figure out why things aren't working, this is not a problem if you have a toolbar or a floating indicator of issues.

[iosdev-republicofapps]

@3lvis the info field works pretty well. I have to add newlines to make it occupy several lines but I can use that, thanks!

I suppose I could add the info fields only in the case of validation failures if I don't want to always show them? I'm not sure if showing the info field would be distracting to people that fill out the field repetitively and know the constraints on values from past experience. Thoughts?

Thanks again!

[iosdev-republicofapps]

The info popup seems to be limited to about 3 lines of text on an iPhone 6. Is there an option to adjust the popup height?

Also, I'd like to modify the keyboard type of some fields (i.e. to turn off spelling suggestions, etc) and I'm not sure how to access the keyboard.

Sorry for all the questions ...

Cheers!

[iosdev-republicofapps]

It looks like the info popover appears on the wrong field in some cases. For example, here, I'm editing in the second (middle tags field) but the info popover hangs off of the third (rightmost tags field). Any ideas?

It seems to depend on the width of the popover's text though. If I shorten 123456789 to say 123, then the popover hangs off of the correct middle tags field.

[3lvis]

The fact that the info bubble appears in a different form field seems like a bug. Might be nice to isolate in order to figure out a fix.

[3lvis]

Regarding modifying the keyboard you have to use the form fields' input_type. These are the available mappings: https://github.com/hyperoslo/Form/blob/efde99850ce61586d8ce28c3a4c4875c7d637498/Source/Cells/Views/FORMTextField.m#L188-L219

And this is how each input type is configured. https://github.com/hyperoslo/Form/blob/2c7bae694f143ceb7f37196c48d9f02c2f9e2cbf/Source/Cells/Views/FORMTextFieldTypeManager.m