search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.15k stars 2.15k forks source link

mdc-textfield: ignores 'formnovalidate' and 'novalidate' attributes #217

Open bparadie opened 7 years ago

bparadie commented 7 years ago

Bugs

Follow the template below to ensure the quickest and most accurate response to your issue.

What MDC-Web Version are you using?

0.2.0

What browser(s) is this bug affecting?

Chrome Version 55.0.2883.95 (64-bit)

What OS are you using?

OSX 10.10.5

What are the steps to reproduce the bug?

Please write the steps which need to be taken in order to reproduce the bug. These steps should be as detailed as possible, e.g.

  1. go to https://material-components-web.appspot.com/textfield.html
  2. inspect Password field with validation input element
  3. add formnovalidate to the attribute list of that input element
  4. enter "123" as the value for that input field
  5. tab out

What is the expected behavior?

The input field should not be validated, Choose Password and the help text should stay blue.

What is the actual behavior?

Choose Password and the help text turn red.

Any other information you believe would be useful?

The problem is in https://github.com/material-components/material-components-web/blob/master/packages/mdc-textfield/foundation.js#L112

const isValid = input.checkValidity();

It should be more along the lines of:

const isValid = !hasFormNoValidate(input) && input.checkValidity();

Note that in most cases those input elements are used in forms. There are two attributes that the HTML5 spec mentions for disabling form validation:

For more details see https://www.html5rocks.com/en/tutorials/forms/constraintvalidation/

It would be great if mdc-textfield supported formnovalidate and novalidate attributes.

Garbee commented 7 years ago

These attributes are about the form level validation when submitted. Not the individual input nodes within it. There are cases where you may wish to novalidate the form (or individual items) yet still use JavaScript to check for validity as the user enters data.

The existing functionality matches what the browsers provide very closely. We shouldn't stray from that too far. Is there any alternative solution that could provide the functionality needed without interfering with what developers already understand of the platform?

sgomes commented 7 years ago

@bparadie Thanks for the bug report!

I am not entirely sure if looking at novalidate/formnovalidate is the right angle for this. Could you please provide some details on what you're trying to accomplish, so that we have a bit more context in deciding on how to address this?