google / google/material-design-lite

Required input fields should not be marked invalid (red) automatically.

Open
#1,502 35 comments 44 reactions 0 assignees View on GitHub
Checkbox Radio Slider Textfield
Dominant language
HTML
Stars
32.2k
Forks
4.9k
PR merge metrics
No merged PRs in 30d

Description

If an input field is required then it will automatically be marked as invalid. This should not happen on a page load, but once a user interacts with it. See solution below.

``` JS
/**
* Check the validity state and update field accordingly.
*
* @public
*/
MaterialTextfield.prototype.checkValidity = function () {
if (this.input_.validity.valid) {
this.element_.classList.remove(this.CssClasses_.IS_INVALID);
} else {
if (this.element_.getElementsByTagName('input')[0].value.length > 0) {
this.element_.classList.add(this.CssClasses_.IS_INVALID);
}
}
};
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.