Closed Bug 548131 Opened 14 years ago Closed 13 years ago

Add generic client side validation to our forms

Categories

(addons.mozilla.org Graveyard :: Public Pages, enhancement, P3)

enhancement

Tracking

(Not tracked)

RESOLVED WONTFIX
4.x (triaged)

People

(Reporter: clouserw, Unassigned)

References

Details

(Whiteboard: [z])

Attachments

(1 file)

Universal client side validation on our forms is something we've wanted for a long time and now that we're just starting the forms for zamboni it's the perfect time.  Rdoherty cooked up a rough idea for behavior and visuals[1], and jbalogh found django-ajax-validation[2] which looks like it would fit the bill.

This bug is to integrate a library and make sure it's generic enough to use on all our forms.

[1] http://people.mozilla.org/~rdoherty/personas-amo/Personas%20Upload.png
[2] http://github.com/alex/django-ajax-validation/blob/master/docs/usage.txt
Hey Chris, could you give this bug a quick chowsing?

The new clearleft user edit page would be a good subject to just do some quick error and validation states for good and bad data.
Assignee: jbalogh → chowse
QA Contact: add-ons → web-ui
Whiteboard: [z]
Depends on: 548498
Here's a quick mock in the various states of validation/correctness. Behavior follows Ryan's mocks:

1. Validation is done on when a control loses focus.
2. Spinner appears while validation is done.
3. Green check appears if valid, fades after a few seconds.
4. Lots of red if invalid. I included 3 possible treatments of the error text, but my preference is for the added line below the control.

Looks like it should scale well for pages that can grow vertically.
(In reply to comment #2)
> Created an attachment (id=428984) [details]
> Profile Page w/ Validation

Shiny! I like the error messaging next to the icon, makes it quicker to read. Putting it below the form field disassociates it with the error (IMO).

It might be better to put '(optional)' next to optional fields and nothing next to required fields. Seems like it would make a form a lot cleaner than using asterisks (depending on # of required/optional fields).
(In reply to comment #3)
> Shiny! I like the error messaging next to the icon, makes it quicker to read.
> Putting it below the form field disassociates it with the error (IMO).

Perhaps, but I think the proximity to the control and the shared colors should be enough to preserve the association. Placing the label above the control (but below the label) also displaces the control you were just editing if there's an error. Error beside the label is best (readable, no displacement), but probably lacks enough space in most cases. :(

> It might be better to put '(optional)' next to optional fields and nothing next
> to required fields. Seems like it would make a form a lot cleaner than using
> asterisks (depending on # of required/optional fields).

When required fields outnumber optional ones, I agree. But in a form like this, where only a single field is required, it's easier to spot the one field that's marked required rather than sift out which one isn't labeled optional. By contrast, the Personas form (where most fields are required) benefits from having optional things marked as such. Like you said, it depends on the form.
(In reply to comment #4)
> Perhaps, but I think the proximity to the control and the shared colors should
> be enough to preserve the association. Placing the label above the control (but
> below the label) also displaces the control you were just editing if there's an
> error. Error beside the label is best (readable, no displacement), but probably
> lacks enough space in most cases. :(

imo text below a form field is normally used for instructions, but I bow to your design expertise :)


> When required fields outnumber optional ones, I agree. But in a form like this,
> where only a single field is required, it's easier to spot the one field that's
> marked required rather than sift out which one isn't labeled optional. By
> contrast, the Personas form (where most fields are required) benefits from
> having optional things marked as such. Like you said, it depends on the form.

Yeah, either way wfm, just wanted to note it.
Great, thanks chowse.  Let's put the errors below the control, craig can help us with css.
Assignee: chowse → jbalogh
Target Milestone: 5.8 → 5.9
No longer a priority since we're focusing on public pages
Target Milestone: 5.9 → 4.x (triaged)
Assignee: jbalogh → nobody
If we get time for this someday we'll need to revisit the design to use the new forms anyway.  -> wontfix
Status: NEW → RESOLVED
Closed: 13 years ago
Resolution: --- → WONTFIX
Product: addons.mozilla.org → addons.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: