[#4515] 2.0b4 registration feature suggestion

I would like to see more inline validation for the (tabbed) registration.
When I have a textarea that requires a minimum number of words and a user has worked himself through 5 or 6 tabs and wants to send the form it is annoying when he receives a bunch of error messages and he es to flip through the registration again to adjust every input.

It would be better if validation would happen immediately whe a user is leaving a field. One validation is currently missing, number of words. There should be some war to have the number of words caluclated while the user is typing, showing him when he reached minmium and/or maximum allowed number/chars.

Textareas support maximum length perfectly fine. There's no need to run validation on it, because you can't add characters beyond the maximum length so you could never have 11 characters if the maximum length is set to 10. Textarea Editor fields are completely different though as we can't bind to them for validation and it has to be done at PHP time.

jQuery validator doesn't validate inputs that are not visible. This is good and bad. Since the tabs just hide their content it means jQuery validator will skip any tab you're not actively viewing, but determining if it's just a normal visible tab or if the element is truly meant to be hidden is the problem

I've added a bug ticket for the validation not working so great with tabbed usages. Will investigate further and see if it's possible to fix without breaking legitimately hidden inputs.

forge.joomlapolis.com/issues/4515

What you are saying is correct only for maximum number of words but not for minimum.
Here is an example what I believe is much better: www.aspsnippets.com/demos/262/

In this case it is for characters only but it could be customed for words as well. What I am trying to say is that I am missing a visual clue for the user what to expect from this field. Another option would be to have a red background of the field as long as the validation is negative and turn green once it is validated. this would prevent the fields to jump around due to the validation text.
I see lots of ways to improve here.
Another option would simply be a counter that show the number of words. Make it red colour as long as minimum is not met. Green when minimum is met and maximum not yet reached and red again when maximum is due.
I think this would help a lot.

Same goes almost for the tabbed process. I try to be very specific: the tabs at the top are barely visibl compared to the coloured "Register" button. So from a users perspective it is very easy to overlook them.
So again visual clueas would be great. This could be:
- Add "Next" and "Previous" buttons until the user hits the last tab. Then change button to register.
- Make the "Register" button unclickable or at least grey colour until user reachces last tab.
- Make tab heading different colour and easier to detect. Colours could even change once the user has finished one tab.

Again, I believe there are numerous ways to improve this from the users perspective.

What you are saying is correct only for maximum number of words but not for minimum.
Here is an example what I believe is much better: www.aspsnippets.com/demos/262/

I see, yeah I don't think the minimum length parameter even has jQuery validation usage. Have added a note to the ticket to also look into that.

In this case it is for characters only but it could be customed for words as well. What I am trying to say is that I am missing a visual clue for the user what to expect from this field. Another option would be to have a red background of the field as long as the validation is negative and turn green once it is validated. this would prevent the fields to jump around due to the validation text.
I see lots of ways to improve here.
Another option would simply be a counter that show the number of words. Make it red colour as long as minimum is not met. Green when minimum is met and maximum not yet reached and red again when maximum is due.
I think this would help a lot.

Validation errors will display under the field with proper Bootstrap alert styling. You can see it now by making a field required then not supplying it a value.

- Add "Next" and "Previous" buttons until the user hits the last tab. Then change button to register.

I've implemented jQuery binding for cbTabNavPrevious and cbTabNavNext. You can add buttons with these classes in a Custom HTML field to have previous/next navigation anywhere you like.

- Make the "Register" button unclickable or at least grey colour until user reachces last tab.

That doesn't make sense unless you're specifically wanting Step by Step, which not everyone wants. That's something you could do with a little jQuery added by CB Auto Actions. It's just too specific to be a part of the core. It also wouldn't be functional at all on Flat layout. You could also use CSS to hide the initial registration button and render a custom one on your last tab using a Custom HTML field. This used to be something CB Conditional provided and may provide again in a later release.

- Make tab heading different colour and easier to detect. Colours could even change once the user has finished one tab.

They're Bootstrap 3 styled. Once we go stable I'll be releasing the LESS files in which case you could generate a new bootstrap.css with whatever bootstrap theme you like. We are avoiding altering the core styling of Bootstrap to allow for unlimited styling potential through Bootstrap Themes.

krileon wrote: Validation errors will display under the field with proper Bootstrap alert styling. You can see it now by making a field required then not supplying it a value.

I am comparing the new tabbed registration process with the step by step registration and I believe the new way poses more confusion for the users.
With the tabbed registration the validation for required fields only happend when I press the register button. While with step by step registragion it happend when I switched to the next tab.
The validation for minimum words/characters ist not present. For maximum words/characters it is simply that the user cannot type anymore without giving him a hint what is going on. And validation for a required field happends only on pressing register button.

I think all of these should be improved.

krileon wrote: That doesn't make sense unless you're specifically wanting Step by Step, which not everyone wants. That's something you could do with a little jQuery added by CB Auto Actions. It's just too specific to be a part of the core. It also wouldn't be functional at all on Flat layout. You could also use CSS to hide the initial registration button and render a custom one on your last tab using a Custom HTML field. This used to be something CB Conditional provided and may provide again in a later release.

Yes this might be specific for step by step compared to simply tabbed registration. But it seems that there is no step by step registration any more. So I have to use this. And I believe it is not very good substition. If there will be improvement in the core or by a plugin does not matter to me.
I am just testing it and telling you what I believe is missing.

Tabbed registration is exactly the same as profile edit usage. It's not Step by Step. We do not have official Step by Step. That was provided by CB Conditional, which was removed as the usage won't be valid anymore and needs to be redone for the new tabbed layout.

The validation for minimum words/characters ist not present. For maximum words/characters it is simply that the user cannot type anymore without giving him a hint what is going on. And validation for a required field happends only on pressing register button.

The validation kicks in on change for selects and on click for other inputs. I'll be reviewing this behavior further as part of the bug ticket. It should be for text and textarea fields on keyup so it can validate as you type.

Yes this might be specific for step by step compared to simply tabbed registration. But it seems that there is no step by step registration any more. So I have to use this. And I believe it is not very good substition. If there will be improvement in the core or by a plugin does not matter to me.
I am just testing it and telling you what I believe is missing.

CB Conditional will be providing Step by Step using the Tabbed layout as its based. It was removed because it was jQuery tabs and barely worked at times. With built in Tabbed layout it'll be significantly easier for this functionality to be implemented. Core CB does not have built in Step by Step; just Tabbed. I've added a CB Conditional ticket for this so it'll be more clear that it's coming back for its next release.