Foundation-sites: span.form-error will not get is-visble class with input type="submit"

Created on 19 Sep 2016  路  6Comments  路  Source: foundation/foundation-sites

Here is the codepen example with two forms.
Form with button works great, but form with input.type=submit works partialy.
Form is validated, but form-error span is not shown because is-visible class was not applyed to that span.

http://codepen.io/anon/pen/BLLdGV

Abide PR open forms 馃悰bug

All 6 comments

Upon further testing, it turned out that you need to wrap the <input class="button" type="submit" value="Submit"> with the <fieldset> group element tag. Hmmmmm.

@denisahac thanks for the solution. I just encountered the same problem and can confirm that wrapping in <fieldset> solves it for <input> button. Furthermore, it looks like all form fields must be in field sets to enable the form-error to be revealed, but the <input> doesn鈥檛 actually need to be contained within the _same_ <fieldset> as the field being validated. (and thanks to @Lazerproof for posting)

Furthermore, it looks like all form fields must be in fieldsets to enable the form-error to be revealed

@ncoden according to the docs this isn't true for _all_ form fields, like text inputs, right?

@Lazerproof @denisahac @kobrix See the documentation:

Abide automatically detects Form Errors of an input by their class (.form-error by default, see the formErrorSelector option) when they are siblings of the input or inside the same parent.

When the Form Errors cannot be placed next to its field, like in an Input Group, the relation can be declared with [data-form-error-for] attribute.

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

This is true for all validated input. Abide will look for form-errors next to them and explicitly defined errors [data-form-error-for].

hmmm, actually that's a bug, I did not read the issue correctly at first.

Here are the result of my research. Abide does display the input error correctly, but then consider input[type=submit] as a field - without errors - and hide all related errors (even if already "used" by others fields). So a fix could be to:

  • Ignore submit[type=text] in validation
  • Only consider direct childs as related errors and prevent an error to be related to several fields.
Was this page helpful?
0 / 5 - 0 ratings