我在车把输入表单中设置了一些验证,如果用户忘记填写输入字段并提交表单,我希望他们已经输入的数据在提交后通过验证错误保持不变。目前它适用于文本输入字段,但我无法让它适用于 <select>
输入。当提交表单时,选择输入值会被重置。我尝试将该值设置为 select 标签和 option 标签上的属性,但这些都不起作用。这是我必须用 jQuery 设置的东西吗?非常感谢有关如何实现这一目标的任何建议!
这是我的html。我遇到问题的字段标有 *
<div class="row">
{{#with costHours}}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item"><a href="/find">Find</a></li>
<li class="breadcrumb-item active" aria-current="page">Add {{project_id}}</li>
</ol>
</nav>
<div class="card border-secondary w-100 text-light" style="background-color: #333f48">
<h5 style="background-color: #bf5700;" class="card-header">Costs & Hours</h5>
<div class="card-body w-100">
{{/with}}
{{#each errors}}
<div class="my-2 text-start" style="border: 1px solid black;">
<p>{{text}}</p>
</div>
{{/each}}
{{#with costHours}}
<form action='/add/costs_hours/{{project_id}}' id="formData" method="POST">
{{/with}}
<table id="tableData" class="table text-light text-center mt-3">
<thead>
<tr>
<th scope="col">Project ID</th>
<th scope="col">Implementation or Annual</th>
<th scope="col">Category</th>
<th scope="col">Costs</th>
<th scope="col">Hours</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="input-group mb-3">
{{#with costHours}}
<input id="validationCustom03" value="{{project_id}}" name="project_id" type="text"
{{/with}}
class="form-control">
</div>
</td>
<td>
******<div class="input-group mb-3">
<div class="input-group mb-3">
<select value='{{imp_or_ann}}' name="imp_or_ann" class="form-select imp_or_ann"
id="inputGroupSelect01">
<option selected disabled>Choose...</option>
<option value='{{imp_or_ann}}'>Implementation</option>
<option value='{{imp_or_ann}}'>Annual</option>
</select>
</div>
</div>******
</td>
<td>
******<div class="input-group mb-3">
<div class="input-group mb-3">
<select value='{{category}}' name="category" class="form-select category" id="inputGroupSelect01">
<option disabled selected>Choose...</option>
<option>EMO</option>
<option>Analysts</option>
<option>Maintenance</option>
<option>ETS</option>
<option>BOT</option>
<option>OtherUT</option>
<option>Materials</option>
<option>Non-UT Contract</option>
<option>Contingency</option>
</select>
</div>
</div>******
</td>
<td>
<div class="input-group mb-3">
<input value='{{cost}}' name="cost" type="text" class="cost form-control">
</div>
</td>
<td>
<div class="input-group mb-3">
<input value='{{hours}}' name="hours" type="text" class="hours form-control">
</div>
</td>
</tr>
</tbody>
</table>
<div class="card-footer text-end">
<button type="submit" class="btn btn-success text-light">Submit
</button>
</div>
</form>
</div>
</div>
</div>
我不知道这是否相关,但这是我设置验证的控制器。
createCostsHours: async (req, res) => {
let { project_id, imp_or_ann, category, cost, hours } = req.body;
let errors = []
try {
const costHours = await Prjt_costs_hours.findOne({
where: {
project_id
}
});
if (!imp_or_ann){
errors.push({text: "please select an option for implementation or annual"})
};
if (!category){
errors.push({text: "please select an option for category"})
};
if (!cost){
errors.push({text: "please enter a value for cost"})
};
if (!hours){
errors.push({text: "please enter a value for hours"})
};
if (errors.length > 0){
res.render('add/addCostsHours', {
errors, imp_or_ann, category, cost, hours, costHours
})
} else {
const costHours = await Prjt_costs_hours.create({
project_id, imp_or_ann, category, cost, hours,
});
return res.redirect('/find')
}
} catch (error) {
console.error(error.message);
return res.status(500).json(error);
}
},