验证react-bootstrap中选择类型的输入

Question

我正在处理一个表单，并且正在使用react-bootstrap。我对所有字段进行了验证，除了类型输入之外，它按预期工作select。这是我的表格：

<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>

required我在所有字段中放置了一个道具select，就像对所有输入所做的那样，但它似乎不起作用，因为它总是显示为有效，即使它是无效的。为什么会发生这种情况以及如何解决这个问题？

Answer 1

您必须将value“无效”设置option为空字符串，以便在验证过程发生时它是无效选择

例子：

<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>