Validate inputs of type select in react-bootstrap

Question

I am working on a form and I am using react-bootstrap. I did validation on all fields and it works as expected except inputs of select type. Here is my form:

<Form
  className="order-details-form"
  noValidate
  validated={validated}
  onSubmit={handleProceed}
>
  <div className="row phone-number-wrapper">
    <img src={code_arrow} />
    <div className="overlay" />
    <Form.Group
      className="country-code-wrapper"
      onChange={(e) => countryFlagHandler(e)}
    >
      {imgLink && (
        <img
          src={`${imgLink}`}
          alt="country-flag"
          id="img"
          className="flag-img"
        />
      )}
      <Form.Control
        id="select"
        as="select"
        type="select"
        name="country_code"
        onChange={setFormValue}
        value={form.country_code}
      >
        <>
          <option data-countrycode="">Select Code</option>
          {countryCodes}
        </>
      </Form.Control>
    </Form.Group>
    <Form.Group className="col-md-6">
      <Form.Label>Email</Form.Label>
      <Form.Control
        type="email"
        name="email"
        onChange={setFormValue}
        placeholder="Add Email"
        value={oldCustomer ? oldCustomer.email : form.email}
      />
    </Form.Group>
  </div>
  <div className="row">
    <Form.Group className="col-md-6">
      <Form.Label>
        First Name<span className="req-tag">*</span>
      </Form.Label>
      <Form.Control
        required
        type="text"
        name="first_name"
        onChange={setFormValue}
        placeholder="Add First Name"
        value={oldCustomer ? oldCustomer.first_name : form.first_name}
      />
    </Form.Group>
  </div>
  <div className="row">
    <Form.Group className="col-md-6 payment-method">
      <Form.Label>
        Payment Method<span className="req-tag">*</span>
      </Form.Label>
      <Form.Control
        required
        as="select"
        type="select"
        name="payment_method"
        onChange={setFormValue}
        value={form.payment_method}
      >
        <option>Select Payment Method</option>
        <option value="cash">Cash</option>
        <option value="online">Online</option>
        <option value="card_machine">Card Machine</option>
      </Form.Control>
      <Form.Control.Feedback type="invalid">
        Please Add Payment Method
      </Form.Control.Feedback>
    </Form.Group>
    <Form.Group className="col-md-6 source-menu">
      <Form.Label>
        Source Menu<span className="req-tag">*</span>
      </Form.Label>
      <FormControl
        required
        as="select"
        type="select"
        name="source"
        onChange={setFormValue}
        value={form.source}
      >
        <option>Select Source</option>
        <option value="ebutler">EButler</option>
        <option value="e_commerce_website">E-Commerce Website</option>
        <option value="live_chat">Website - Livechat</option>
        <option value="direct_call">Direct Call</option>
        <option value="email">Email</option>
        <option value="whatsapp">Whatsapp</option>
        <option value="facebook">Facebook</option>
        <option value="twitter">Twitter</option>
        <option value="instgram">Instagram</option>
        <option value="others">Others</option>
      </FormControl>
      <Form.Control.Feedback type="invalid">
        Please add Payment Method
      </Form.Control.Feedback>
    </Form.Group>
  </div>
  <Button
    className={`next-btn margin-btn`}
    // onClick={handleProceed}
    type="submit"
  >
    Next
  </Button>
  <Button
    className={`prev-btn margin-btn`}
    onClick={prevStep}
    type="button"
  >
    Previous
  </Button>
</Form>

I placed a required prop in all select fields as I did with all inputs but it doesn't seem to be working as it is always displayed as valid even if it is void. Why could this happen and how can I fix this?

95faf8e76605e973 · Accepted Answer · 2020-09-16 12:25:11Z

8

You have to set the value of the "not valid" option to an empty string for it to be an invalid choice when the validation process takes place

Example:

<Form.Control required as="select" type="select" name="payment_method" onChange={setFormValue} value={form.payment_method}>
  <option value="">Some Invalid Option</option> // <-- assign empty string as value
  <option value="cash">Cash</option>
  <option value="online">Online</option>
  <option value="card_machine">Card Machine</option>
</Form.Control>

answered Sep 16, 2020 at 12:25

95faf8e76605e973

14.3k4 gold badges30 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Saif Over a year ago

Thanks a lot. That worked with my form as expected.

Collectives™ on Stack Overflow

Validate inputs of type select in react-bootstrap

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related