在 Bootstrap 中下拉选择页面作为选项值的表单,带有转到按钮?

问题描述 投票:0回答:0

我正在尝试做一个基本站点,并且是 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 的例子并不多。

html forms validation dropdown
© www.soinside.com 2019 - 2024. All rights reserved.