Material Ui - Add required attribute to a TextField in "select" mode

user_4478933 0
Viewed 26068

I am trying to make "required" a TextField in select mode. I tried to add required prop like in this snippet, but this does not block the submit event if I haven't select anything. Although it adds the '*' to the label.

Please check this sandbox

<TextField
  id="select-currency"
  select
  label="Select"
  value={this.state.currency}
  onChange={this.handleChange("currency")}
  required
>
  {currencies.map(option => (
    <MenuItem key={option.value} value={option.value}>
      {option.label}
    </MenuItem>
  ))}
</TextField>

UPDATE: (Clarification really) I am talking about html5 validation. In the sandbox example there are Select and Text fields, setting the text field as required will block the submit event and displays a native html5 error saying "this field is required", this is not the case if the field is "select".

html-validation material-ui reactjs
3 Answers

Material Ui provides another component Native Select to handle this kind of native validation.

Please check this example

Edit Material demo

user_44789330
user_11425710

It's not field responsibility to control form behavoiur. It's parent-child relation and top-down data passing.

Form (component) provides current value to component (validity information, change handler) to field component. Field displays content using styles and elements depending on props (* when required, error border etc) but it's form' role to decide about value/validity/submiting.

user_61246570
Related