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

[bparadie]

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:

• <form novalidate>
• <input formnovalidate>

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]

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]

@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?