Form validation with custom patterns fails if javascript is disabled

[rubenquidam]

This happens with sites that use custom values for the pattern attribute, such as "alpha_numeric" which are not part of the html5 spec (which requires a regexp).

What should happen?

Form should still be usable even if javascript is disabled or foundation.js is blocked.

What happens instead?

Fields not matching the regular expression prevent the form from being submitted. In the case of the previous form, first field, it would pass it if you write "alpha_numeric" as the field content.

Possible Solution

Please do not advise people to use the pattern field in ways that don't comply with the html5 standard! You seem to already have some other way to do it with custom attributes, so please don't use the standard one for this, as it breaks functionality for people opting out of your library.

Test Case and/or Steps to Reproduce (for bugs)

Test Case: https://amazonwatch.org/take-action/urge-ecuadors-new-oil-friendly-environmental-minister-to-reject-yasuni-oil-drilling

That is not my site, I'm a web browser developer.

How to reproduce:

1. Disable javascript or install a script blocker such as NoScript.
2. Visit https://amazonwatch.org/take-action/urge-ecuadors-new-oil-friendly-environmental-minister-to-reject-yasuni-oil-drilling
3. Fill up the form with proper values and try to submit.

Context

I maintain web browsers and extensions that focus on privacy and software freedom, and I was reported that sites using your library may fail to validate forms if javascript is disabled.

Your Environment

• Foundation version(s) used: https://amazonwatch.org/assets/v3/foundation.min.js
• Browser(s) name and version(s): Firefox 64
• Device, Operating System and version: not relevant
• Link to your project: That is not my site, I'm a web browser developer.

Checklist

• I have read and follow the CONTRIBUTING.md document.
• There are no other issues similar to this one.
  There is one, but you closed it! Abide Pattern HTML5 issue #6501
  Please don't close this ticket until it is corrected, you are encouraging web developers to break standards.
• The issue title and template are correctly filled.

[DanielRuf]

Hi @rubenquidam, thanks for bringing this to our attention again. I have created a PR. Can you review it?

#11673

[DanielRuf]

window.Foundation
{name: "Foundation", version: "5.0.0", media_queries: {…}, stylesheet: CSSStyleSheet, init: ƒ, …}

[DanielRuf]

We do not support Foundation 5 anymore. So this will just land in 6 and newer releases.

[SassNinja]

@rubenquidam the docs recommend (more or less obvious) to use novalidate what would avoid ending up with a form that can't be submitted
https://foundation.zurb.com/sites/docs/abide.html

But you're right, we shouldn't encourage to use non-standard values for standard attributes.

[SassNinja]

@DanielRuf I took a look at your PR:
according to what I said above I think we should adjust the docs and use data-pattern there, too

[rubenquidam]

@DanielRuf I don't have experience with foundation myself to review the PR, I'm just reporting it from the POV of a browser maintainer.

@SassNinja I agree that this is mostly a documentation and advice issue, just make sure that pattern is only used for standard values (regex) so the nonstandard values there can be deprecated.

Thanks to both for working on this.