live validation/ajaxy success/error messages need to be laid out properly [ERRORS]

[otwstephanie]

From mooncros...@gmail.com on May 07, 2008 10:13:07

What steps will reproduce the problem? 1. Go to Post a story

2. Start filing out the fields and stop typing: message appears and page shifts
3. Continue typing. Message disappears and text shifts again What is the expected output? What do you see instead? To be honest, I found this most confusing and it'll probably start to annoy me if posting to the archive often. The green text that appears is distracting from what the user's doing (which is filling in fields). It shifts the rest of the page down, which is startling ("Huh? What just happened?"). If you continue typing in the same field, the message disappears again, with the page shifting again.

I would much prefer some kind of countdown counter telling the user how much more characters they can type (and how long is the title allowed to be?). But if a "Length" message is required, perhaps it's possible to reserve the space it needs so it can appear and disappear without shifting the rest of the page around? Please use labels and text to provide additional information. WinXP, FF 2.0.0.14, IE 7.

Original issue: http://code.google.com/p/otwarchive/issues/detail?id=82

[otwstephanie]

From jlbar...@mindspring.com on May 07, 2008 17:24:48

I agree, the seemingly-random shifting about of the page is confusing and annoying. It happens in both Netscape 7.2 and Safari 1.3.2 on Mac OS 10.3.9 as well.

[otwstephanie]

From shal...@gmail.com on May 12, 2008 16:19:59

We need a consistent layout and style for any success/error messages produced by live validation or AJAX-type changes -- the fix for this will need to wait on input from design team.

Summary: live validation/ajaxy success/error messages need to be laid out properly
Status: Accepted
Labels: Component-UI Milestone-Internal0.9

[otwstephanie]

From shal...@gmail.com on September 02, 2008 06:53:40

I have temporarily turned off the live validation options so at least that part doesn't look broken for beta. In the long run, we want only warnings of bad data to appear, not the "thanks!" messages, and these should be laid out more cleaning. Postponing this until after beta, however.

Labels: -Milestone-Internal0.9 Milestone-PostBeta

[otwstephanie]

From Black0Sa...@gmail.com on September 04, 2008 03:43:05

Labels: Roadmap-MainNavigation Roadmap-Work

[otwstephanie]

From eni...@gmail.com on March 06, 2009 13:03:45

No pressure though. koff

Labels: Milestone-Internal0.6

[otwstephanie]

From Black0Sa...@gmail.com on October 20, 2009 01:18:38

Changing internal milestone to 0.7

Labels: -Milestone-Internal0.6 Milestone-Internal0.7

[otwstephanie]

From liminim...@googlemail.com on January 22, 2010 09:30:34

have taken possession of these issues temporarily until jan 30 commit for documentation purposes

Status: Started
Owner: liminimail

[otwstephanie]

From liminim...@googlemail.com on January 23, 2010 05:09:05

Summary: live validation/ajaxy success/error messages need to be laid out properly [ERRORS]

[otwstephanie]

From liminim...@googlemail.com on January 30, 2010 11:11:24

Status: Accepted
Owner: ---

[otwstephanie]

From betsy.ha...@gmail.com on February 14, 2010 17:38:44

grabbing if lim doesn't want it

Status: Assigned
Owner: betsy.haibel

[otwstephanie]

From liminim...@googlemail.com on February 15, 2010 10:03:12

Betsy! Yay! Please check out all issues marked [ERRORS], the notes in the css file system-messages and this issue: http://code.google.com/p/otwarchive/issues/detail?id=185

[otwstephanie]

From eni...@gmail.com on February 28, 2010 09:40:40

Labels: -Component-UI Component-FrontEnd

[otwstephanie]

From elz...@gmail.com on June 21, 2010 12:43:05

Labels: Milestone-Internal0.8

[otwstephanie]

From autu...@gmail.com on November 14, 2010 11:54:39

Bulk adding NeedsTest labels to all open issues

Labels: NeedsTests

[otwstephanie]

From eni...@gmail.com on July 01, 2012 16:00:22

Labels: -Milestone-Internal0.8 Milestone-Internal0.9

[otwstephanie]

From eni...@gmail.com on September 16, 2012 15:11:25

Setting free as years and years have passed, and the issue itself is probably due for revising.

Betsy, if you want to come back to it, you know our arms are always open :)

Status: PendingReview
Owner: ---
Labels: -NeedsTests

[otwstephanie]

From sarken on July 22, 2013 21:49:55

https://github.com/otwcode/otwarchive/pull/1287 Here's a list of form fields with the annoying LiveValidation in question:

ABUSE FORM

• "Link to the page you are reporting (required)"
• "Describe your concern (required)" -- should this have a character counter/is there a limit?

ADMIN USERS SHOW

• "Suspend: enter a whole number of days"
• "Notes (required field)"

ADMIN POST

• should there be validation and a counter on the title, like the work and FAQ forms?
• content, after field, before character counter

ADMIN ARCHIVE FAQ

• "Title", after field, before nothing, should there be a character counter?
• content, after field, before character counter

CHALLENGE SETTINGS SIGN-UP INSTRUCTIONS

• "General Sign-up Instructions:"
• "#{prompt_type.singularize.capitalize} Instructions:" aka Request and Offer Instructions

CHAPTER FORM

• "Chapter title"
• "Chapter summary"
• content, after field -- the error ("We salute your ambition! But sadly the content must be less than 500000 characters long. (Maybe you want to create a multi-chaptered work?)") doesn't make sense given you are making a chaptered work already

COLLECTION SETTINGS FORM

• "Brief Description:"
• "Introduction:" -- invalid HTML on the character counter because it's a paragraph nested inside a paragraph
• "FAQ:" -- invalid HTML on the character counter because it's a paragraph nested inside a paragraph
• "Rules:" -- invalid HTML on the character counter because it's a paragraph nested inside a paragraph
• "Assignment Notification Message:" -- invalid HTML on the character counter because it's a paragraph nested inside a paragraph
• "Gift Notification Message:" -- invalid HTML on the character counter because it's a paragraph nested inside a paragraph

COMMENT FORM (LOGGED OUT)

• "Name:"
• "Email:"
• content

FEEDBACKS (SUPPORT)

• "Brief summary (required)" -- should this have a character counter/is there a limit?
• "Your comment (required)" -- should this have a character counter/is there a limit?

KNOWN ISSUES (ADMIN)

• should there be validation on the beta revision field?
• content

PROMPT ON CHALLENGE SIGN-UP FORM

• "#{prompt_type}_description_label ? Description" (on challenge sign-ups, you can include a Description field, which might not always say Description because you can rename it)

SERIES EDIT

• "Series Title*"
• "Series Description"
• "Series Notes"

USERS PASSWD PARTIAL (CREATE USER)

• "User Name"
• "Password"
• "Confirm Password"

USERS EDIT (EDIT PROFILE)

• "Title"
• "Location"
• "About Me"

STANDARD FORM (POST NEW OR EDIT WORK)

• "Work Title *"
• "Summary"
• content

There are two known issues here:

(1) In webkit browsers, on the Abuse form's "Link to the page you are reporting (required)" field and the Support form's "Your comment (required)" field, the LV error pops over the field if you click in the field, leave it empty, click away, click back in field, and click away again. This is because of the float on the footnote. I might do a complete overhaul of footnotes on forms when I attempt to beat the forms into submission, but for now? It's cosmetic, you can still select the field, it's not easily fixable, so like the joke says, if it hurts, don't do it.

(2) When you are logged in as an admin and you go to suspend a user, if you enter something that isn't a number in the "Suspend: enter a whole number of days" field, the error message doesn't point directly at the box, but at the radio button for the "Suspend: enter a whole number of days" option. That's because we don't normally lay our forms out like that. This might end up being better after the form standardization of doom project. For now, I have faith that our admins can figure out what it means. ;)

Status: SubmittedPullRequest
Owner: sarken