这是一个Bootstrap形式，我需要添加到我的烧瓶网站。我需要在提交表格之前填好所有的值。我只知道"需要"。在提交前强制设置这些值。但这行不通。我是web开发的新手，我已经尝试了我能想到的所有排列和组合，但我无法使此表单支持必填字段。任何帮助都将不胜感激。所需的标签在所有的输入标签中，但是表单仍然在没有任何提示的情况下提交。
<form
name="sentMessage"
action="/#top5cars"
method="post"
novalidate
autocomplete="off"
>
<div class="row">
<div class="col-lg-6">
<img
src="{{ url_for('static', filename='assets/img/car.jpg')}}"
class="img-fluid"
alt=""
/>
</div>
<div class="col-lg-6 mt-5 mt-lg-0 d-flex">
<div class="row align-self-center gy-4">
<div class="col-md-7" data-aos="zoom-out" data-aos-delay="200">
<div class="feature-box d-flex align-items-center">
<input type="number" class="form-control no-border"
id="cost_min" placeholder="Cost Min"
value={{inp_data["cost_min"]}}
name="cost_min" required>
<input type="number"
class="form-control no-border" id="cost_max"
placeholder={{inp_data["cost_max"]}} name="cost_max" required
>
</div>
</div>
<div class="col-md-5" data-aos="zoom-out" data-aos-delay="300">
<div class="feature-box d-flex align-items-center">
<input required type="text" class="form-control no-border"
id="brand" placeholder={{inp_data["brand"]}} name="brand" >
</div>
</div>
<div class="col-md-7" data-aos="zoom-out" data-aos-delay="300">
<div class="feature-box d-flex align-items-center">
<input type="number" class="form-control no-border"
id="mileage_min" placeholder={{inp_data["mileage_min"]}}
name="mileage_min" required >
<input type="number"
class="form-control no-border" id="mileage_max"
placeholder={{inp_data["mileage_max"]}} name="mileage_max"
required >
</div>
</div>
<div class="col-md-5" data-aos="zoom-out" data-aos-delay="300">
<div class="feature-box d-flex align-items-center">
<select
class="form-select no-border"
aria-label="Default select example"
name="type"
id="type"
>
<option selected>{{inp_data["type"]}}</option>
<option value="Petrol">Petrol</option>
<option value="Diesel">Diesel</option>
<option value="CNG">CNG</option>
</select>
</div>
</div>
<div class="col-md-7" data-aos="zoom-out" data-aos-delay="300">
<div class="feature-box d-flex align-items-center">
<select
class="form-select no-border"
aria-label="Default select example"
name="Seating_Cap"
id="Seating_Cap"
>
<option selected>{{inp_data["Seating_Cap"]}}</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="16">16</option>
</select>
</div>
</div>
<div class="col-md-5" data-aos="zoom-out" data-aos-delay="700">
<div class="feature-box d-flex align-items-center">
<button name = "santabanta" type="submit" class="btn btn-outline-primary" onclick="scrollxyz">
Submit
</button>
</div>
</div>
</div>
</div>
</div>
</form>
我在一个Flask项目中使用这个Bootstrap表单。
使用属性novalidate禁用浏览器默认的表单验证。如果你把它拿掉，它就能工作了。但是，如果您想使用自定义样式或自引导的预定义样式，则novalidate-属性是正确的。如果是这种情况，那么您应该在客户端使用javascript或后端实现自己的表单验证。