Bootstrap表单验证失效：点击按钮直接跳转个人主页问题求助

问题根源 #

你当前用的是<a>标签作为提交按钮，它的默认行为就是直接跳转页面，完全不会触发Bootstrap的表单验证逻辑，所以不管表单内容合不合规，点击后都会跳转到个人主页。

解决方案步骤 #

• 替换跳转链接为提交按钮：把<a>标签改成<button>，并设置type="submit"，这样点击时会触发表单的提交事件，Bootstrap的验证规则才会生效。
• 添加JS验证逻辑：监听表单的submit事件，先阻止默认提交行为，检查表单是否验证通过，通过后再手动跳转到目标页面。
• 修复HTML语法错误：原代码中Email字段模块多了一个多余的</div>，需要删除，避免布局混乱。

修改后的完整代码 #

<div class="col-16 bg-dark">
    <div class="d-flex justify-content-center">
        <h1 class="text-white">Sign up below</h1>
    </div>
</div>
<form class="row g-3 needs-validation" novalidate>
    <div class="col-md-4">
        <label for="validationCustomFName" class="form-label">First name</label>
        <input type="text" class="form-control" id="validationCustomFName" value="" required>
        <div class="valid-feedback">
            Looks good!
        </div>
    </div>
    <div class="col-md-4">
        <label for="validationCustomLName" class="form-label">Last name</label>
        <input type="text" class="form-control" id="validationCustomLName" value="" required>
        <div class="valid-feedback">
            Looks good!
        </div>
    </div>
    <div class="col-md-4">
        <label for="validationCustomUsername" class="form-label">Username</label>
        <div class="input-group has-validation">
            <span class="input-group-text" id="inputGroupPrepend">@</span>
            <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
            <div class="invalid-feedback">
                Please choose a username.
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <label for="validationCustomEmail" class="form-label">Email</label>
        <input type="email" class="form-control" id="validationCustomEmail" required>
        <div class="invalid-feedback">
            Please provide a valid email.
        </div>
    </div>
    <div class="col-md-6">
        <label for="validationCustom05" class="form-label">Phone Number</label>
        <input type="number" class="form-control" id="validationCustomNumber" required>
        <div class="invalid-feedback">
            Please provide a valid number.
        </div>
    </div>
    <div class="col-12">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
            <label class="form-check-label" for="invalidCheck">
                Agree to terms and conditions
            </label>
            <div class="invalid-feedback">
                You must agree before submitting.
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="d-flex justify-content-center">
            <button class="btn btn-primary" type="submit">Sign up!</button>
        </div>
    </div>
</form>

<script>
// 监听表单提交事件
document.querySelector('.needs-validation').addEventListener('submit', function (event) {
    // 阻止默认的表单提交行为
    event.preventDefault();
    event.stopPropagation();
    
    // 检查表单是否验证通过
    if (this.checkValidity()) {
        // 验证通过，跳转到个人主页
        window.location.href = 'profilepage.html';
    }
    
    // 添加was-validated类，触发Bootstrap的验证样式
    this.classList.add('was-validated');
});
</script>

说明 #

• Bootstrap的表单验证需要通过表单的submit事件触发，并且需要给表单添加was-validated类才会显示验证反馈样式。
• 代码中先阻止默认提交，验证通过后再手动跳转，确保只有合规的表单才能进入个人主页。

内容的提问来源于stack exchange，提问作者DM23545