840746 - Add Non HTML5 Form Validation

Status: VERIFIED FIXED

(Websites :: Firefox Flicks, defect)

Description

[Ben (:bensternthal)]

Support non html5 form validation.

Comment 1

[Osmose [:osmose, :mkelly]]

I can think of two ways to do this:

1. Validate on the server and show error messages if any information is missing. We'd have to add some extra checking with Vimeo to handle the case where a user uploads a video but doesn't enter a name; we'd like to avoid making them upload the file again.

2. Since we already require JavaScript for the upload process, we could add a shim that implements HTML5 form validation. This is slightly less bullet-proof than #1, but even if for some unknown reason the form submits with invalid data, we just show them the upload form again. It's an edge case I'm not concerned about.

Ben: I'm leaning towards #2, what about you?

Comment 2

[Ben (:bensternthal)]

I see no problems with #2.

Comment 3

[Osmose [:osmose, :mkelly]]

Looking into it a bit more, apparently we only use the `required` attribute, so instead of finding a shim to use, we'll just add support for that one attribute across the site.

Adding craig for design guidance. I'll implement once we know what we want it to look like.

Comment 4

[Osmose [:osmose, :mkelly]]

Attachment: Screenshot of error messages on profile page

Here's an example of what the error messages look like after they activate. Since we're replacing HTML5 validation I opted not to include the list of errors at the top of the form, and I used a single string for the error message to cut down on custom strings so that we can use this across the site.

Unfortunately, it seems adding the error message to the label tags pushes down the input (or in the case of the checkbox, pushes over the format dropdown).

Craig: I don't think it's really practical to change the page to work around this, what do you think? Should we go for some sort've floating bubble like the native stuff in Firefox?

Comment 5

[Craig Cook (:craigcook)]

The problem with a floating bubble is that it covers other content, so we'd probably have to do fancy stuff to remove it automatically when the error is corrected. Inline text just stays inline.

We could put the error below the field and it would push down the entire next row so everything would still line up... but the text really needs to be inside the label to be meaningful and accessible.

I'm not sure what the best (or easiest) solution is. I can mess with the CSS and see if I can keep the rows aligned even when an error pushes a field down.

Comment 6

[Osmose [:osmose, :mkelly]]

It wouldn't be hard at all to make the bubble appear on error and disappear when the user clicks the associated input box. Would that work?

Comment 7

[Craig Cook (:craigcook)]

(In reply to Michael Kelly [:mkelly] from comment #6)
> It wouldn't be hard at all to make the bubble appear on error and disappear
> when the user clicks the associated input box. Would that work?

Yeah that might not be so bad. If it happens as soon as the field gets focus that hopefully won't imply the error is instantly corrected.

Comment 8

[Craig Cook (:craigcook)]

I've made it so the error appears below the field and pushes the entire next row down, but the message itself is still inside the label. I'm using some positioning and negative margins so it messes up if the label text is long enough to wrap to a second line (the second line goes behind the field) but I don't think that'll be a problem.

I've also remixed the styling around the checkboxes and email prefs, as per Holly's comments, which did require adding some classes as style hooks but that's it.

The latest is in https://github.com/craigcook/firefox-flicks/commit/697773c5ba64a860bc21cf11645e6d8b76c1ebe8 and you can probably pull in upload.css whole but the only changes to bring in from profile.html are those two classes around the email prefs.

And if this still doesn't work out when we do more thorough testing (if some locale has really long labels, for instance) we can still try the floating bubbles.

Comment 9

[[github robot]]

Commit pushed to master at https://github.com/mozilla/firefox-flicks

https://github.com/mozilla/firefox-flicks/commit/d3ff7affb3b02e15e31001fa9b43e9d13518069b
Fix Bug 840746: Add JavaScript form errors.

Adds a JS shim that detects if HTML5 form validation is supported and,
if it isn't, activates some simple form validation. The only attribute
supported is required since it's the only one we use.

Comment 10

[Osmose [:osmose, :mkelly]]

QA Note: The browser versions that don't support HTML5 validation and will show this custom validation are Firefox 3.6 and lower, IE9 and lower, and Chrome 8 and lower. We probably only care about Firefox and IE here given how good Chrome is at forcing people to update.

Comment 11

[Osmose [:osmose, :mkelly]]

To test:

1. On the profile form for new users, test that the Full Name and Privacy Policy checkbox show a "This field is required." string when the form is submitted without them filled out.

2. On the video submission form, the Title field should show the message when the form is submitted.

Comment 12

[Rebecca Billings [:rbillings]]

Verified