Foundation-sites: Form error message doesn't work properly with inline label

[marcusconnor]

Due to the way the form inline label is styled (using table display) the error message does not display properly. Here are three possible approaches to a fix:

1. Add extra HTML/CSS around the label (example linked)
2. Update javascript to look outside the parent for error message
3. Change the CSS for inline labels/inputs to not use table layout

I don't know what the best solution is, but I got number 1 working. The issue, and that fix may be seen on this pen I made.

[gakimball]

The second solution seems ideal if we can make it work. As I recall, Abide tries to just magically find the error element that goes with the input, but we should have a way to manually associate them. Maybe by putting aria-describedby on the error?

[andycochran]

Currently, inline labels don't actually use <label> tags. We could require a label wrap the whole thing and put the error inside it.

<label class="is-invalid-label">
  Money <!-- optional label text -->
  <div class="input-group">
    <span class="input-group-label">$</span>
    <input class="input-group-field is-invalid-input" type="number" required aria-invalid aria-describedby="foo">
  </div>
  <span class="form-error is-visible" id="foo">This field is required.</span>
</label>

[RLHawk1]

Any update on this?

[SammyB]

+1

[kball]

I think the right answer here is probably to make Abide more specific... you should be able to point each element to its' error label, with fallback to the "default" magic finding.

[Quisp]

Not sure if this is a proper fix, but keeping the span inside the label but adding data-abide-error attribute to it seems to fix the issue?

``` <div data-abide-error class="alert callout small" style="display:none;"> <p><i class="fi-alert"></i> Ooops!</p> </div><!-- /data-abide-error --> <label>Email Address<sup class="required">*</sup> <div class="input-group"> <span class="input-group-label"><i class="fi-mail"></i></span> <input class="input-group-field" id="signInEmail" name="signInEmail" value="" type="email" aria-describedby="formEmailHelpText1" placeholder="Email Address" required pattern="email"> <span data-abide-error class="form-error"> Email address is missing or not complete. </span> </label> <p class="help-text" id="formEmailHelpText1"> Please enter your email address. </p>
Perhaps someone else can check this? it displays okay, but shows an error if there are other errors on the form.

[benjaminkohl]

I'd definitely like to see a fix for this where we can do something like this on the input:
data-abide-form-error="#myFieldFormErrorContainer"

[zzplab]

+1

[kball]

@IamManchanda want to take a look at this as a part of your JS practice?

[svenkle]

+1

[ahoefling]

The markup recommended by @Quisp worked for me. I needed to add data-abide-error into my span outside of the group and it started working

[JeremyEnglert]

@ncoden - should this be fixed in the upcoming version, or should be just update the docs? It seems like the work around listed above works.

[ncoden]

@JeremyEnglert You're right. I'll update the docs.

[ncoden]

I looked further and I can confirm that this is not a bug. Foundation automatically detect form errors in the same parent than the <input>, but we cannot extends this behavior without creating conflicts between fields.

Globally, this is always a good thing to explicitely declare relations between elements. So the recommanded usage is to use data-form-error-for="inputId" to declare this relation without depending on the form error and field positions.

The following usage is recommended:

<div class="input-group">
    <span class="input-group-label">$</span>
    <input class="input-group-field" type="text" id="exampleInput" required>
</div>
<span class="form-error" data-form-error-for="exampleInput">Please enter amount.</span>

The following work arounds are NOT recommended:

• Changing the form error CSS
• Changing the HTML template just to "get it works".
• Using [data-abide-error] in the form error (or it will be displayed when any field in the form in invalid)

See: https://foundation.zurb.com/sites/docs/abide.html#form-errors