title: Stop validation of one field in React Form component in a React Bootstrap Form
body: <p>I have a react form to collect a user's address. On the first row of the form I take the users first line of address, road and suburb. This form validates entry thanks to the 'validated' prop passed into the Form, and the 'required' prop passed into each Form control except in the case of 'suburb'</p>
  <pre><code>    return (
          &lt;Form noValidate validated={props.isValidated} onSubmit={props.onSubmit}&gt;
              &lt;Form.Row&gt;
                  &lt;Form.Group as={Col} md=&quot;4&quot; controlId=&quot;validationCustom01&quot;&gt;
                      &lt;Form.Label&gt;Address line 1&lt;/Form.Label&gt;
                      &lt;Form.Control
                          required
                          type=&quot;text&quot;
                          onChange={(e) =&gt; {
                              setAddressLineOne(e.target.value);
                          }}
                      /&gt;
                      &lt;Form.Control.Feedback&gt;&lt;/Form.Control.Feedback&gt;
                  &lt;/Form.Group&gt;
                  &lt;Form.Group as={Col} md=&quot;4&quot; controlId=&quot;validationCustom02&quot;&gt;
                      &lt;Form.Label&gt;Road&lt;/Form.Label&gt;
                      &lt;Form.Control
                          required
                          type=&quot;text&quot;
                          defaultValue={road}
                          onChange={(e) =&gt; {
                              setRoad(e.target.value);
                          }}
                      /&gt;
                      &lt;Form.Control.Feedback&gt;&lt;/Form.Control.Feedback&gt;
                  &lt;/Form.Group&gt;
                  &lt;Form.Group as={Col} md=&quot;4&quot; controlId=&quot;validationCustom03&quot;&gt;
                      &lt;Form.Label&gt;Suburb&lt;/Form.Label&gt;
                      &lt;Form.Control
                          type=&quot;text&quot;
                          defaultValue={suburb}
                          onChange={(e) =&gt; {
                              setSuburb(e.target.value);
                          }}
                      /&gt;
                  &lt;/Form.Group&gt;
  </code></pre>
  <p>When a user hits submit without filling in any of the fields, the following is rendered:
  <a href="https://i.stack.imgur.com/4WY4K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4WY4K.png" alt="enter image description here" /></a></p>
  <p>The issue is, I don't want to validate suburb at all, it looks a little silly being highlighted in green when it's empty. Is there some prop I can pass to the suburb form group to stop it from being validated at all when the user hits submit? It shouldn't show any feedback at all, neither red nor green.</p>
  <p>The alternative would be to split up the form into multiple forms, with some fields being in a validated form and some fields being in a non-validated form, but I feel like there should be a better way.</p>