[Patternfly] Fwd: UI indicating field is required

[Gabriel Cardoso]

Attached is how we are dealing with required fields on LiveOak. If the user doesn’t fill in some required field, it is not possible to Save.



And for smaller resolutions:



Regarding the password validation, there are some advocating that this interaction can be improved by providing a way for the user to see the password rather than asking him to type it twice [1].  

We implemented this on LiveOak by including an eye icon in the input, that reveals the password. 



Gabriel


On Jul 3, 2014, at 10:57 AM, Andreas Nilsson <anilsson at redhat.com> wrote:

> On 07/03/2014 03:42 PM, Robb Hamilton wrote:
>> 
>> there was another request this week for rules regarding form validation.  specifically, how to handle the validation of password inputs when creating a new password where the password has to be input twice (does this happen client-side, server-side?  what messaging appears and when?  etc.).
> 
> We're currently working on solving this in Cockpit here: https://github.com/cockpit-project/cockpit/issues/739 and the pull request https://github.com/cockpit-project/cockpit/pull/809 but it would be great to have this code live in Patternfly instead of locally in our cockpit-accounts.js
> So here is the current behaviour:
> * On error, both fields turns red, since the error refers to both fields and the typo of your regular password could have happened in the first field.
> * The password is getting checked while you're typing. If the secret password is "hacker" the fields will turn red already at the "o" if typing "hackor" in the second field. This catches typos right away.
> * There is a timer of 2 seconds for the second field so it can catch things like a missing last "r" in the case of the "hacker" password is just "hacke"
> * There is certainly room to improve the logic above, but I feel it covers at least the basic cases for now.
> * There is still a tiny issue in that if you focus the first field with the mouse, and then use tab to jump to the second field and do an error, the first field will remain red due to the blue hover effect on the first field.
> - Andreas
> 
> _______________________________________________
> Patternfly mailing list
> Patternfly at redhat.com
> https://www.redhat.com/mailman/listinfo/patternfly

---
Gabriel Cardoso
User Experience Designer @ Red Hat

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listman.redhat.com/archives/patternfly/attachments/20140703/b6dd2b26/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2014-07-03 at 1.48.15 PM.png
Type: image/png
Size: 27027 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20140703/b6dd2b26/attachment.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2014-07-03 at 1.51.48 PM.png
Type: image/png
Size: 8802 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20140703/b6dd2b26/attachment-0001.png>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screen Shot 2014-07-03 at 1.50.57 PM.png
Type: image/png
Size: 12369 bytes
Desc: not available
URL: <http://listman.redhat.com/archives/patternfly/attachments/20140703/b6dd2b26/attachment-0002.png>