[WIP] Inline form field validation #4034

bennothommo · 2019-01-04T05:28:11Z

This is a WIP / Proposal to implement inline form field validation for forms built with the Form widget.

One of the shortcomings of validation in October currently is that the form is validated on submission, and only one error message is shown via a flash message. While this is fine for smaller forms, when larger forms are produced, and the possibility of multiple fields having issues increases, it could cause frustration getting messages one at a time.

This pull request aims to provide immediate feedback on errors with form field contents by:

Adding a validation call when a field has lost focus or has changed.
Validating the linked model for the current form and retrieving any errors for the changed input in the context of the entire form contents. (ie. if a field is invalid due to the contents of another field, this too needs to be detected)
Showing the validation error in a friendly way to the user (perhaps as a message underneath the field, or as an icon next to the label and using a tooltip message to display the error)

At the moment, the scope is to only handle simple form fields, such as text inputs and textareas, select dropdowns, radio options and checkboxes, but could potentially extend to more advanced widgets if they can be easily validated in the context of a model.

Tasks:

LukeTowers

Overall looks pretty nifty, just a few comments about JS style

modules/backend/widgets/form/assets/js/october.form.js

modules/backend/widgets/Form.php

LukeTowers · 2019-01-04T05:51:51Z

Do you want to post some screenshots of the different options of displaying the error messages to the user? Keep in mind that not all fields have labels all of the time and we'd need it to work well on mobile too.

bennothommo · 2019-01-04T06:33:41Z

@LukeTowers Not a problem. Will try and mock those up over the weekend.

bennothommo · 2019-01-06T05:25:31Z

Here are three options that I can think of so far:

The simple inline error message:

Should work with all types of fields, with the only downside being that it could considerably shift the layout of the form if there are quite a few fields that have errors.

Or, there could be an icon with a tooltip message that is shown on mouse hover (or by tapping the icon on mobile):

This would minimise the real estate needed for error messages and keep the form looking "clean". The only wrinkles would be working out placement when the label is missing, and for inline fields such as radio and checkboxes.

Finally, there could be a tooltip shown when the field is focused:

Removes the need for an icon and finding placement for it, but again, might be difficult to show for radios and checkboxes because they only get focused on when clicked.

I personally find the icon with tooltip popup to be the most "clean" way of showing the error (I've been using it so far for my own local copy), but ultimately, it may need to be the simple inline error message to support all types of fields.

modules/backend/widgets/form/assets/js/october.form.js

w20k · 2019-01-06T11:17:30Z

@bennothommo, ping me when you need major testing to be done 😉

bennothommo · 2019-01-06T12:26:57Z

@w20k Will do 😃

modules/backend/widgets/Form.php

bennothommo · 2019-01-07T01:55:46Z

@LukeTowers Do you have any thoughts on the styling of the error messages per #4034 (comment)? I might try and finalise that first before hooking it up to the other field types.

LukeTowers · 2019-01-07T03:33:21Z

@bennothommo I'm leaning towards the inline messages right now, they're the simplest for the user to understand what's going on, perhaps with some iconography for colour accessibility? This article makes a lot of excellent points. Perhaps look at this one too: https://designmodo.com/ux-form-validation/

bennothommo · 2019-01-07T04:01:19Z

@LukeTowers Thanks for that. I think you're right, and those articles make compelling points. I'll proceed with the simple error message underneath the field.

w20k · 2019-01-07T06:57:06Z

@bennothommo, would be awesome if you add JUnit tests 😄

bennothommo · 2019-01-07T07:26:01Z

@w20k Sure thing. Is that similar to the functional tests in the tests directory, or is that something else?

w20k · 2019-01-07T10:24:17Z

@bennothommo, I think unit tests would work. Don't feel like functional testing is needed here.

modules/backend/classes/FormField.php

w20k · 2019-05-03T15:25:43Z

@bennothommo do you think I could be of any use? Would love to help you to finish this PR ;)

bennothommo · 2019-05-04T01:45:06Z

@w20k I'd love any help you're willing to provide :). What would you be interested in having a look at? You could either set up some handlers for checkboxes and radio inputs, or you could maybe set up a PR for the test plugin to test this feature? Essentially, to test this feature, you just need to add inlineValidation: true to any form config or field config inside a form config to enable the check.

If you wanted to do some work on this plugin, it may be best to set up a PR to go to my branch above.

w20k · 2019-05-04T10:07:40Z

@bennothommo I'll start from making a PR to the test-plugin. So, that I would be easier to test, already implemented features, and understand what's there missing :)

Would also ask you to push your branch to OctoberCore, if @LukeTowers don't mind. So, that I could provide PR's to help you with the coding part as well. Little by little getting back to my daily duties 😄

w20k · 2019-05-04T10:19:05Z

modules/backend/widgets/form/assets/js/october.form.js

+            widget = this
+
+        var $innerField = $(field.querySelector('select'))
+        if (!$innerField) {


@bennothommo I think you have a bug :) $innerField will be an empty object, but present.
You could either change it to !!$innerField or $innerField.length === 0.

Good catch :)

w20k · 2019-05-04T18:12:08Z

modules/backend/widgets/form/assets/js/october.form.js

+                continue
+            }
+
+            var fieldClasses = field.className.split(/\s+/).map(function (className) {


@bennothommo I think this part is overly complicated :)
If I've understood it correctly you need to find the field which has a class corresponded to the Regexp - /^([a-z\-]+)-field$/ and that's it.

Two options: either use indexOf() to cut down all those not needed fields or change Regex to be more accurate (before&after spaces, dirty try: (\s+)?([a-z\-]+)-field(\s+)? ).

@w20k Yeah I did initially have just a regex, but I thought this way was more readable, albeit a bit more complex. Your regex works just as well though. :)

bennothommo · 2019-05-07T07:31:05Z

This PR is now being developed in #4322.

Ben Thomson added 2 commits January 4, 2019 13:16

Add validation bindings on text form fields in Form Widget

b8b13de

Add initial functionality to validate field in context of form contents

1e3e49c

LukeTowers suggested changes Jan 4, 2019

View reviewed changes

LukeTowers added Type: Enhancement Status: In Progress labels Jan 4, 2019

Code style changes as requested by @LukeTowers

0ecc793

Ben Thomson added 4 commits January 6, 2019 14:39

Add inline error styling (icon with tooltip)

1c6af3b

Show inline error message for text input and textarea fields

42bcf7e

Remove semi-colons

28604d8

Check that a field exists in field div before attaching listeners

9c081ba

w20k reviewed Jan 6, 2019

View reviewed changes

modules/backend/widgets/form/assets/js/october.form.js Outdated Show resolved Hide resolved

Remove more semi-colons

f8678d9

LukeTowers reviewed Jan 7, 2019

View reviewed changes

modules/backend/widgets/Form.php Outdated Show resolved Hide resolved

Remove unused reference

0e96c71

Ben Thomson added 5 commits January 9, 2019 13:57

Change to inline error messages appearing underneath field(s)

87c1bf5

Remove feedback color on help block to make inline error more visible

57d24ef

Remove semi-colons

5e14b7a

Allow inline validation to be toggled at a form, section and field level

ef5a227

Enable inline validation on main fields in administrator form

bfbfee3

Remove semi-colons

8617232

LukeTowers reviewed Jan 9, 2019

View reviewed changes

modules/backend/classes/FormField.php Outdated Show resolved Hide resolved

Change boolval() calls to bool type-casting

9e8c666

LukeTowers approved these changes Jan 10, 2019

View reviewed changes

Ben Thomson and others added 7 commits January 11, 2019 16:16

Add bindings for select dropdowns

0a3462a

Merge branch 'develop' into form-field-validation

9ef8ddd

Allow definition of inline validation flag in form fields YAML file

30dfc58

Allow form fields to be invidually specified for inline validation

9981c88

Bypass mass assignment restrictions when validating full data

106afbf

Add balloon selector validation binding

b25117e

Merge branch 'develop' into form-field-validation

f7fa917

bennothommo self-assigned this May 4, 2019

w20k reviewed May 4, 2019

View reviewed changes

bennothommo added duplicate and removed Status: In Progress Type: Enhancement labels May 7, 2019

bennothommo closed this May 7, 2019

bennothommo deleted the form-field-validation branch May 7, 2019 07:31

daftspunk unassigned bennothommo Oct 22, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Inline form field validation #4034

[WIP] Inline form field validation #4034

bennothommo commented Jan 4, 2019 •

edited

LukeTowers left a comment

LukeTowers commented Jan 4, 2019

bennothommo commented Jan 4, 2019

bennothommo commented Jan 6, 2019

w20k commented Jan 6, 2019

bennothommo commented Jan 6, 2019

bennothommo commented Jan 7, 2019

LukeTowers commented Jan 7, 2019 •

edited

bennothommo commented Jan 7, 2019

w20k commented Jan 7, 2019

bennothommo commented Jan 7, 2019

w20k commented Jan 7, 2019 •

edited

w20k commented May 3, 2019 •

edited

bennothommo commented May 4, 2019 •

edited

w20k commented May 4, 2019

w20k May 4, 2019 •

edited

bennothommo May 4, 2019

w20k May 4, 2019 •

edited

bennothommo May 5, 2019

bennothommo commented May 7, 2019

[WIP] Inline form field validation #4034

[WIP] Inline form field validation #4034

Conversation

bennothommo commented Jan 4, 2019 • edited

Tasks:

LukeTowers left a comment

Choose a reason for hiding this comment

LukeTowers commented Jan 4, 2019

bennothommo commented Jan 4, 2019

bennothommo commented Jan 6, 2019

w20k commented Jan 6, 2019

bennothommo commented Jan 6, 2019

bennothommo commented Jan 7, 2019

LukeTowers commented Jan 7, 2019 • edited

bennothommo commented Jan 7, 2019

w20k commented Jan 7, 2019

bennothommo commented Jan 7, 2019

w20k commented Jan 7, 2019 • edited

w20k commented May 3, 2019 • edited

bennothommo commented May 4, 2019 • edited

w20k commented May 4, 2019

w20k May 4, 2019 • edited

Choose a reason for hiding this comment

bennothommo May 4, 2019

Choose a reason for hiding this comment

w20k May 4, 2019 • edited

Choose a reason for hiding this comment

bennothommo May 5, 2019

Choose a reason for hiding this comment

bennothommo commented May 7, 2019

bennothommo commented Jan 4, 2019 •

edited

LukeTowers commented Jan 7, 2019 •

edited

w20k commented Jan 7, 2019 •

edited

w20k commented May 3, 2019 •

edited

bennothommo commented May 4, 2019 •

edited

w20k May 4, 2019 •

edited

w20k May 4, 2019 •

edited