title: material ui dropdown validation?
body: <p>I am trying to validate my dropdown field wherein if the value is empty the box should have a red border and text in red color should become visible to say that the box cannot be left blank. I am using normal javascript for the validation even though it may not be ideal but please give me a solution in this format only. I am using document.getElementById to get the id of the input html. However I am not able to validate the dropdown box.</p>
  <p>Here is my code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;Grid item xs={6}&gt;
    &lt;FormControl
      id=&quot;UOM_Before&quot;
      style={{ width: &quot;80%&quot; }}
      size=&quot;small&quot;
    &gt;
      &lt;InputLabel
        htmlFor=&quot;UOM_Before&quot;
        id=&quot;UOM_Before&quot;
        style={{
          marginLeft: 10,
          top: &quot;50%&quot;,
          transform: &quot;translate(0,-50%&quot;
        }}
      &gt;
        UOM
      &lt;/InputLabel&gt;
      &lt;Select
        labelId=&quot;UOM_Before&quot;
        id=&quot;UOM_Before&quot;
        name=&quot;UOM_Before&quot;
        onChange={handleChange(&quot;UOM_Before&quot;)}
        defaultValue={values.UOM_Before}
        variant=&quot;outlined&quot;
        inputProps={{
          id: &quot;UOM_Before&quot;,
          name: &quot;age&quot;
        }}
      &gt;
        &lt;MenuItem value=&quot;Nos&quot;&gt;Nos&lt;/MenuItem&gt;
        &lt;MenuItem value=&quot;Percentage&quot;&gt;Percentage&lt;/MenuItem&gt;
        &lt;MenuItem value=&quot;Metric&quot;&gt;Metric&lt;/MenuItem&gt;
      &lt;/Select&gt;
    &lt;/FormControl&gt;
    &lt;label
      id=&quot;uom_before&quot;
      style={{ visibility: &quot;hidden&quot;, color: &quot;red&quot; }}
    &gt;
      UOM cannot be left blank
    &lt;/label&gt;
  &lt;/Grid&gt;
  </code></pre>
  <p>Here is the code for the validation:</p>
  <pre class="lang-js prettyprint-override"><code>handleAddRow = () =&gt; {
  
    if (document.getElementById(&quot;UOM_Before&quot;).value == &quot;&quot;) {
      document.getElementById(&quot;uom_before&quot;).style.visibility = &quot;visible&quot;;
      document.getElementById(&quot;UOM_Before&quot;).style.border = &quot;1px solid red&quot;;
    } else {
      const item = {
        Kpi_Before: [],
        UOM_Before: &quot;&quot;,
        Base_Before: &quot;&quot;,
        Target_Before: &quot;&quot;,
        dateTime: &quot;&quot;
      };
      this.setState({
        rows: [...this.state.rows, item]
      });
    }
    
  };
  </code></pre>