Validation/Form Style

[rugulous]

We need to decide on our approach for forms and their validation.

There are two main approaches that I see:

1. User fills out all the fields and clicks the action button. At this point, every field gets validated. If there are no validation issues, the user can continue to the next section/page/whatever

2. The action button is initially disabled. Once the user interacts with a field, validation is triggered for that field (error message displayed alongside if invalid). If the field is valid, the rest of the fields are checked for validity but not reported. If all fields are valid, the action button is enabled

[rugulous]

I personally prefer option 1 as it's the more "traditional" way things are done; equally, having the action button disabled to start with could confuse people as they may not realise they need to fill fields in to enable it.

@matt-fidd @laurenacton what do you guys think?

[laurenacton]

with the first one i assume the pop up would also come up? like saying "please fill in the email" or whatever. if so then yeah id say the first one, we'd just need to figure out where the pop up would be going because you don't want it covering the stuff that they haven't filled in right.

[rugulous]

@laurenacton - sorry, not the best example for 2. The popup isn't part of what I meant for this...

What I meant was, the form starts like this

Then, once the fields are filled in, it's only once all the fields are valid that the "Sign In" button becomes clickable?

Additionally, if there are any errors with the fields they would be highlighted as soon as you move off it (if that makes sense?)

[matt-fidd]

Personally not a fan of number 2, I don't think it looks as nice and number 1 has the same functionality whilst keeping the page neater.

I think the largely adopted approach recently is to have on-the-fly validation attached to an onBlur event for the input boxes. I think this is what you were talking about here...

Additionally, if there are any errors with the fields they would be highlighted as soon as you move off it (if that makes sense?)

Additionally, it is preferred from an accessibility and ease of use standpoint to have the invalid messages appear next to/below the invalid field(s) as opposed to a box with all of the errors in at the bottom.