Improve user error messaging consistency for forms

[clash99]

This task covers consistent presentation of error messages. Future tasks will cover improved verbiage and client-side validation.

Improve error messaging by:

• Add error classes to turn error field borders red
• Turn error messages red
• Add background to fields with error to make them easier for users to locate

Page inventory:

• Login
• Register
• Reset Password
• Change Password
• Profile
• Add organization
• Edit organization
• Add organization members
• Edit organization member
• New project - details
• Edit project details

[clash99]

Also once messages appear, you can select to go back to previous page and they still appear. That is probably a bug.

[oliverroick]

I agree, improving error message is something we should address during the next sprint.

Form fields should be validated on client side before the form is sent to the server. This will make it easier to highlight erroneous form fields along with an appropriate error message, as you described.

We should implement generic form field validation that we can apply to all form throughout the client.

[wonderchook]

@clash99 is this complete?

[clash99]

No - I will try to update this issue this week with more details.

[clash99]

In addition to improving messaging, we should also present them consistently.

[wonderchook]

@clash99 I think the first option is more obvious. What do you think?

[clash99]

I think the first option only works in cases where the error messaging is limited. Since some fields can have more than one error message, I think we have to work with something like this. We are increasing usability just by changing the field border, label and error messages color.

Also a bigger task of providing some client-side form validation and improving error messaging text should occur separately.

[wonderchook]

@clash99 an you explain the geometry one a little further?

[clash99]

In the location wizard, you can't proceed without selecting a location on the map but there isn't an error message to inform the user. I'm not sure how to check that no area has been selected on the map to throw the error.

Location: http://screencast.com/t/Ue1cqzBh3C1B

When creating a new project, you can continue without selecting an area on the map but I'm not sure that you should be able to. Seems like an error should be included on that page too and the map geometry should be required.

Project: http://screencast.com/t/Ilms1EBilww

[seav]

Based on the back-end model, having a geometry for the project is not required.

So is this intended? I think the platform can work even if the project has no geometry.

[wonderchook]

I think a project should have a geometry though I don't think it was discussed if it was required or not. Locations don't have to have geometries, though I think that is going to be difficult to deal with in the short term.

[clash99]

Using novalidate to suppress html5 form validations to avoid double messages like this:

[clash99]

Screenshots (future tasks include improving verbiage and client-side validation):

[clash99]

Moved geometry pages to #345 for further discussion.

[clash99]

I have a broken functional test that need fixed in branch enhancement/error-msgs before I can make a pull request. @linzjax or @seav - do you have any availability to take a look? Just let me know... thanks!

[linzjax]

Fixed