material-components / material-components/material-web

md-button: form validation not prevented by use of formnovalidate

Open
#5,780 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
SCSS
Stars
11.3k
Forks
1.1k
Avg merge
20h 28m
Merged PRs (30d)
13

Description

### What is affected?

Component

### Description

As [per spec](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fs-formnovalidate) the [form submission attribute](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#form-submission-attributes) formnovalidate should prevent constraint validation.

It appears that this code, does not take into account submitter attributes.

https://github.com/material-components/material-web/blob/919fe12badcfee4dcd72c390c0869dd8f996b51c/labs/behaviors/on-report-validity.ts#L298-L316

Since submitter is already defined here, via element internals
https://github.com/material-components/material-web/blob/919fe12badcfee4dcd72c390c0869dd8f996b51c/internal/controller/form-submitter.ts#L110-L124

A fix seems possible by checking the submitter attribute and ignoring validation:

```js
// This submit was from `form.requestSubmit()`, which already calls the
// listener.
if (isNextSubmitFromHook) {
return;
}

// Ignore validity check as configured by form submission attribute
if (event.submitter.hasAttribute('formnovalidate')) {
return;
}

onControlValid();
```

I am not sufficient familiar with the spec, so i don't know what should happen to fields that already have constraint validation checked/visible? should them be reset or untouched? Intuitively it seems they should remain in the same state.

For curiosity, my use case is very similar to the one presented on the spec (submit the cancelation of a form):

```html

Name:


Essay:




```

### Reproduction

Two native forms, one with a `button[formnovalidate]` and other with a `md-outlined-button[formnovalidate]`. One submits, other (wrongly) validates):

[https://lit.dev/playground/#project=W3sibmFtZSI6Im1hdGVyaWFsLWltcG9...](https://lit.dev/playground/#project=W3sibmFtZSI6Im1hdGVyaWFsLWltcG9ydHMuanMiLCJjb250ZW50IjoiaW1wb3J0IFwiQG1hdGVyaWFsL3dlYi9idXR0b24vb3V0bGluZWQtYnV0dG9uLmpzXCI7XG5pbXBvcnQgXCJAbWF0ZXJpYWwvd2ViL3RleHRmaWVsZC9vdXRsaW5lZC10ZXh0LWZpZWxkLmpzXCI7In0seyJuYW1lIjoiaW5kZXguaHRtbCIsImNvbnRlbnQiOiI8IURPQ1RZUEUgaHRtbD5cbjxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIi4vbWF0ZXJpYWwtaW1wb3J0cy5qc1wiPjwvc2NyaXB0PlxuPHN0eWxlPmZvcm0geyBwYWRkaW5nOiAycmVtOyBtYXJnaW46IDJyZW07IGJvcmRlcjogMXB4IHNvbGlkIGdyYXkgfTwvc3R5bGU-XG5cbjxmb3JtPlxuICA8bWQtb3V0bGluZWQtdGV4dC1maWVsZCBsYWJlbD1cIkEgcmVxdWlyZWQgdGV4dC1maWVsZFwiIHJlcXVpcmVkPjwvbWQtb3V0bGluZWQtdGV4dC1maWVsZD5cbiAgPHA-XG4gICAgPG1kLW91dGxpbmVkLWJ1dHRvbiBmb3Jtbm92YWxpZGF0ZT5TdWJtaXQgd2l0aG91dCB2YWxpZGF0aW9uPC9tZC1vdXRsaW5lZC1idXR0b24-XG4gIDwvcD5cbjwvZm9ybT5cblxuPGJyIC8-XG5cbjxmb3JtPlxuICA8bWQtb3V0bGluZWQtdGV4dC1maWVsZCBsYWJlbD1cIkEgcmVxdWlyZWQgdGV4dC1maWVsZFwiIHJlcXVpcmVkPjwvbWQtb3V0bGluZWQtdGV4dC1maWVsZD5cbiAgPHA-XG4gICAgPGJ1dHRvbiBmb3Jtbm92YWxpZGF0ZT5OYXRpdmUgc3VibWl0IHdpdGhvdXQgdmFsaWRhdGlvbjwvYnV0dG9uPlxuICA8L3A-XG48L2Zvcm0-XG4ifSx7Im5hbWUiOiJwYWNrYWdlLmpzb24iLCJjb250ZW50Ijoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJsaXRcIjogXCJeMi4wLjBcIixcbiAgICBcIkBsaXQvcmVhY3RpdmUtZWxlbWVudFwiOiBcIl4xLjAuMFwiLFxuICAgIFwibGl0LWVsZW1lbnRcIjogXCJeMy4wLjBcIixcbiAgICBcImxpdC1odG1sXCI6IFwiXjIuMC4wXCJcbiAgfVxufSIsImhpZGRlbiI6dHJ1ZX1d)

### Workaround

I have not found a workaround yet.

### Is this a regression?

No or unsure. This never worked, or I haven't tried before.

### Affected versions

Failing in @material/web@npm:2.0.0

### Browser/OS/Node environment

Browser: Chrome 133.0.6943.142 (Official Build) (arm64)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading labs/behaviors/on-report-validity.ts at the linked validation path and internal/controller/form-submitter.ts at the linked submitter handling. Reproduce the difference between native button[formnovalidate] and md-outlined-button[formnovalidate] using the provided Lit Playground example. Done means the Material button follows the formnovalidate behavior without incorrectly triggering constraint validation.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.