Material-ui: HTML Validation - `required` attribute in TextField with `select` mode does not work

[bichoymessiha]

I am using html validation in my project, and I am having trouble setting fields as required.

• [ ] This is a v1.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behaviour

Exactly as normal Textfields, when I add "required" prop to a TextField with "select" mode. It should block the submit event and should show html native error "Field is required"

Current Behaviour

When I add "required" prop to a TextField with "select" mode. It does not block the submit event nor show html native error "Field is required". Although it adds the '*' to the label.
This is not the case with the normal TextField --> It works as expected.

Steps to Reproduce

In this example you will find one normal Textfield and one in select mode, both have required={true}.
If the Textfield is empty and I validate, an error will be shown, if the Select is empty the form submits normally. I am trying to have the same behaviour as the normal Textfield

| Tech | Version |
|--------------|---------|
| Material-UI | v3.0.1 |
| React | v16.4.2 |
| Browser | Chrome |

[oliviertassinari]

@bichoymessiha Setting the required attribute on a hidden input doesn't make sense, we don't do it. You have to use the native select if you want to take advantage of the native require validation https://github.com/mui-org/material-ui/issues/11836#issuecomment-405831045. Here is an example:
https://codesandbox.io/s/vyjvoqx83.

[bichoymessiha]

Ok Thank you very much

[rommelmamedov]

@bichoymessiha Setting the required attribute on a hidden input doesn't make sense, we don't do it. You have to use the native select if you want to take advantage of the native require validation #11836 (comment). Here is an example:
https://codesandbox.io/s/vyjvoqx83.

Hello! Why it doesn't make sense? Then what’s use of required attr in the Simple Select element?

[oliviertassinari]

@RamilMamedo To be more precise, the HTML validation won't trigger on a required hidden input. The prop displays a *.

[rommelmamedov]

@RamilMamedo To be more precise, the HTML validation won't trigger on a required hidden input. The prop displays a *.

Is there any chance to make it visibly hidden but not for screen readers so it would trigger the required attribute. For example, we can hide input like this:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

[jonesmac]

I agree with @rommelmamedov what's the drawback to making it invisible via css vs type=hidden?

[oliviertassinari]

@jonesmac You might prefer the native select implementation of the component.

[jonesmac]

I have no choice if I want to use this library and standard html5 validation from what I’m seeing. Also, not really what I asked. I’m curious if the decision for type=hidden is really the best? The same effect of a hidden input can be done with CSS and could benefit from html5 validation. Again, is there an advantage for type hidden vs hiding via css?

[oliviertassinari]

@jonesmac Did you try html form validation with an hidden input? Does it work? As far as I know, it doesn't.

[jonesmac]

type=hidden inputs bypass native HTML 5 validation. Hence I landed here and asked if there was a reason type=hidden was necessary.

Hidden inputs don't participate in constraint validation; they have no real value to be constrained.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden