验证react-bootstrap中select类型的输入

如何解决验证react-bootstrap中select类型的输入

我正在处理表单，并且正在使用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道具，但是它似乎没有用，因为即使它是空的，它也总是显示为有效。为什么会发生这种情况，我该如何解决？

解决方法

您必须将“无效” @page "/" @inherits SubscriptionsBase <h3>Subscriptions</h3> @if (Subscriptions == null) { <div class="spinner"></div> } else { <div class="table"> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Subscription Id</th> <th scope="col">Subscription Name</th> <th scope="col">Options</th> </tr> </thead> <tbody> @foreach (var sub in Subscriptions) { <tr> <th scope="row">@sub.SubId</th> <td>@sub.SubscriptionId</td> <td>@sub.SubscriptionName</td> <td> <a href="#" class="btn btn-primary m-1">Deploy</a> <a href="#" class="btn btn-danger m-1">Delete</a> </td> </tr> } </tbody> </table> </div> } 的{​​{1}}设置为空字符串，以使其在进行验证过程时成为无效选择

示例：

value