问题描述
我正在处理表单,并且正在使用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