Foundation.mozilla.org: Bootstrap error message

[taisdesouzalessa]

@gvn I was wondering if there is a default way we treat error handling in Bootstrap. Ex: does a tooltip show up? Does an inline text show up after the field?

Scenario: if user doesn't check the box accepting the Privacy Notice, the form can't be submitted. here is what we have in the mockup so far:

If there is a default way please let me know and I'll add it to the mockups, adding our style on top of that.

cc: @sabrinang

[gvn]

There's no prescribed way to handle errors, but Bootstrap does have a "Alert" component:

https://v4-alpha.getbootstrap.com/components/alerts/

(We haven't come up with a specific style for this in mofo-bootstrap yet.)

[sabrinang]

Some ideas around error states:

[taisdesouzalessa]

Thanks for the input here! Based on this discussion, here is the application of the error message in the interface:

DESKTOP:

MOBILE:

I implemented them in the prototypes as well - to see it in action, click on the "Join Us" form in the home page without checking the box.

[xmatthewx]

This direction looks great. I propose that we let @gvn run with this, come back to us if he identifies any gaps.

[alanmoo]

Turns out bootstrap does have some validation. https://v4-alpha.getbootstrap.com/components/forms/#examples. There's also some browser-level validation that we can get for free, though its support may not be completely there across browsers. I'll poke at this and see what I get.

[gvn]

Let's use Bootstrap defaults for our soft launch.

[alanmoo]

MVP taken care of for launch in #126. Unassigning for now.

[kristinashu]

I think we can close this but please reopen if you think it is still needed.