Foundation-sites: F6 Abide hidden input fields preventing proper error message display

[wgstjf]

Hi guys,

It's taken me a while to figure out what is going on here....the problem is that any form I have with hidden input fields is preventing the .form-error fields from showing when the form is submitted and invalid. I recognise that I can use the data-abide-ignore feature but as I am working on a Wordpress template I cannot manipulate the output of the nonce or the _wp_http_referer fields to add the attribute.

My first thought was to detect these via jQuery and to retrospectively add the data-abide-ignore attribute to these fields but it hasn't made any difference to the outcome. Is it that Abide needs to be re-initialised? If so how does one do this? If not...please help :-)

Cheers,

Will

[zurbchris]

$('[data-abide]').foundation('_reflow');

[wgstjf]

Outstanding! Thanks for the quick response. :-)

[scudco]

I'm experiencing this exact issue when Rails adds hidden inputs. I know the workaround works, but I think this issue ought to be re-evaluated.

The problem ultimately occurs in Foundation.Abide.prototype.findFormError because it simply traverses up to the hidden field's parent to find _all_ its .form-error elements. This parent element may contain any number of invalid fields with visible form-errors that will then be hidden because the hidden field is valid. Because this is the case, I think a much cleaner hack is to simply override this method to ignore hidden fields:

Foundation.Abide.prototype.findFormError = function($el){
  if ( $el.is('[type=hidden]') ) { return []; }

  var $error = $el.siblings(this.options.formErrorSelector);
  if(!$error.length){
    $error = $el.parent().find(this.options.formErrorSelector);
  }
  return $error;
};

A few questions

• Why would a hidden input be validated (by default) at all?
• Would it be reasonable to add a data attribute-level option for ignoring fields by jQuery selector or simply one for ignoring hidden fields?
• Why are inputs not evaluated for [data-abide-ignore] at the time of validation so that a reflow wouldn't be necessary?
• Could/should form-errors be tightly bound to inputs to prevent this kind cross-contamination of valid/invalid states?

[sdhull]

this issue ought to be re-evaluated

This issue ought to be re-opened. If hidden inputs break abide then I'd call that a major, show-stopping bug.

IMO, hidden inputs should never be validated. It's not possible for users to modify their values (without js magic, and if you've implemented js magic to change hidden input values, then you could implement js magic to validate them or the visible controls as well).

Also, I agree that [data-abide-ignore] should be evaluated at time of validation rather than upon init.

A new option ignore-hidden-inputs could be introduced but since I think that 99.99% of people would want hidden inputs ignored, it's worth the foregoing such an option for simplicity's sake.

[sdhull]

Furthermore, it appears that the HTML5 spec indicates that type='hidden' fields should not be validated.

Constraint validation: If an input element’s type attribute is in the Hidden state, it is barred from constraint validation.

[kball]

I agree this should be reopened. Hidden inputs should be ignored by Abide.

[kball]

@sdhull would you be able to submit a pull request to address this?

[sdhull]

@kball on it

[kball]

Fixed in #8770. Will be in 6.2.2