material-components / material-components/material-web
md-button: form validation not prevented by use of formnovalidate
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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