Form Validation Styling

[sfrisk]

More of a suggestion, but do we want to have styles in place to work with form validation? For example, indicate that a form input is missing, or has the wrong input. We don't necessarily need to hook in the javascript for this, but have classes in place for others to use. (Similar to the Validation States that Bootstrap uses, as an example: http://getbootstrap.com/css/?#forms-control-validation)

Updated 04-07-15

Form validation styling shall consist of the following styling components:

• Form Input/Label Validation Styling
  • This is styling to the form input/label itself, to indicate a validation state such a error, success, etc
• Inline Validation Messages
  • This is a line of text that could go above/below/next to the input that indicates there is an issue
• Validation Notice Above Form
  • A notice above the form indicating success/error. Could possibly include list of errors

Demos/testing will need to be done on not only regular text-like inputs, but irregular looking input such as radio buttons.

[jzaefferer]

I like the idea, I think those states are useful. As an example, here's a demo from my validation plugin using the current jQuery UI theme (obviously not that great for form styles): http://jqueryvalidation.org/files/demo/themerollered.html

But that demo might be a good starting point to test the styles, with some interactions, not just static markup.

[JoeBot0101]

+1 to this.

[MichaelArestad]

+1 to form validation styles and markup. It's a good place to test/show how elements with modifiers classes work (once the BEM naming is decided).

[samatdav]

So we want something like Bootstrap forms visually, but structurally have BEM naming convention to avoid cascading at all?
http://getbootstrap.com/css/?#forms-control-validation

The same in #10 ?

[jzaefferer]

As somewhat of an update to my earlier comment: Styling an input as invalid is pretty trivial (e.g. add red border). Positioning error messages for various contexts is a lot more challenging. Box-like elements like input or selectmenu are reasonable, but non-boxed groups of elements like checkboxes or radio buttons get more complicated. The default demo from my validation plugin shows some of those in action (the checkbox for "Please agree to our policy" and the checkbox group under "Topics", after checking "I'd like to receive the newsletter"). That's not the only way to display error messages, which complicates the topic further.

Would be good to at least decide if error messages are in scope of the CSS framework. I'd like to have that included.

[sfrisk]

Personally I wanted to include error messages as part of the scope CSS
framework, and that was part of my intention with creating this issue, to
cover the styling inputs for validation as well as error messaging.

On Thu, Mar 12, 2015 at 10:53 AM, Jörn Zaefferer [email protected]
wrote:

As somewhat of an update to my earlier comment: Styling an input as
invalid is pretty trivial (e.g. add red border). Positioning error messages
for various contexts is a lot more challenging. Box-like elements like
input or selectmenu are reasonable, but non-boxed groups of elements like
checkboxes or radio buttons get more complicated. The default demo
http://jqueryvalidation.org/files/demo/index.html from my validation
plugin shows some of those in action (the checkbox for "Please agree to our
policy" and the checkbox group under "Topics", after checking "I'd like to
receive the newsletter"). That's not the only way to display error
messages, which complicates the topic further.

Would be good to at least decide if error messages are in scope of the CSS
framework. I'd like to have that included.

—
Reply to this email directly or view it on GitHub
#9 (comment).

Sarah Frisk
sarahfrisk.com

Twitter: twitter.com/SarahFrisk
LinkedIn: linkedin.com/in/sarahfrisk
Github: github.com/sfrisk

[arschmitz]

+1 on supporting styling of the type @jzaefferer mentions this fits in well with our goal of providing style for js components but leaving it up to individual implementations on the JS. @jzaefferer any input you have here would be great i don't think anyone has as much experience with validation messages and styling as you.

[jzaefferer]

Well, if you look at my demos, you might realize that I'm no expert in styling /o\

I could put together an HTML page with various form markup and some very basic CSS to make that look like validation error messages. That could be used as a starting point to write the necessary scss and add classes to this file, replacing my placeholder CSS. Would that help?

[arschmitz]

Yeah i think that would be great

[MichaelArestad]

I've found there should be at least two sets of error message components. The ones for text inputs. Then, another set that can be used inline with form content or full-width above/below a form depending on the type of message. Then each should have various modifier styling (info, warning, error, success, whatever).

[sfrisk]

Updated issue with a description of what validation components should be included. If you can think of anything else, write it down and I'll add it.

[jzaefferer]

One style of error message that I've seen: A kind of tooltip, where the error message is absolutely positioning next to the invalid input. The advantage is probably that it doesn't affect the form layout, which can make it easier to add these later.

A general markup recommendation: Error messages shouldn't use a <label> element. To associate them with their respective input, use something like a span with an id attribute, and add aria-describedby on the input, referencing the id of that span. Since we're going to demo this kind of markup, which should do it right.

Regarding the third item above, "Validation Notice Above Form", I've got this demo showing two styles of that. I'd be happy to rip out my custom CSS and replace it with Chassis...

I previously offered to put together a sample markup page - since I still haven't made any progress, I hope someone else can take that over. The above should help a bit.

[akki12345]

So basically there should be at least two sets of error message components and developed something like bootstrap(http://getbootstrap.com/css/?#forms-control-validation).