我正在尝试做一个基本站点,并且是 bootstrap 的新手。目标是有一个状态选择表单,您可以在其中选择一个状态,选择后,您可以按一个按钮转到该页面。我找到了一些旧示例,但我无法使用 Bootstrap 找到示例。
使用稍微修改过的 Bootstrap 示例形式
<form class="row g-3 needs-validation" novalidate>
<div class="col-sm-10">
<label for="validationState" class="form-label">Select your state.</label>
<select class="form-select" id="validationState" required>
<option selected disabled value=""></option>
<option value="nh.html">New Hampshire</option>
<option value="vt.html">Vermont</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-sm-10">
<button class="btn btn-primary" type="submit" id="go">Submit form</button>
</div>
</form>
还有基础的 starter JS
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(() => {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>
我尝试了一些不同的东西,但它们似乎打破了验证部分。
任何帮助将不胜感激,即使是在正确方向或相关示例/主题上的推动。对于初学者来说,使用 Bootstrap 表单和 JS 的例子并不多。