在验证表单中添加提交按钮的功能-Bootstrap 4

Question

我知道这是一个简单的解决方案，但通过多次谷歌搜索，我似乎找不到问题的答案。我使用的是bootstrap 4中的验证表单，我只是想通过简单地将其链接到不同的页面来为我的按钮添加功能。我试着使用锚标签

即<a href="www.mysite.com" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Submit</a>

这将起作用，但显然绕过了验证。

所以目前我在一个表单中有这个按钮：

<button  class="btn btn-primary" type="submit" >Submit form</button>
</form>

使用这个java脚本：

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>

需要向js添加什么才能使按钮正常工作？？感谢您的帮助！！

Answer 1

这是一个简化版本，代码有很多注释。

// wait for page to load then run the code inside 
window.onload = () => {
// Select the form we want to validate
let form = document.querySelector('form');
// listen for submit event
form.onsubmit = (event) => {
// prevent the form from posting so the page won't refresh
event.preventDefault();
// debugging log statememnet  (not needed)
console.log('Form submitted')
// checking for form validation
if (form.checkValidity() === false) {
// if we're inside this if statement, the form is invalid
// we add the boostrap class to handle styling
form.classList.add('was-validated');
// debugging log statememnet  (not needed)
console.log('Form not valid')
} else {
// if we're inside this if statement, the form is valid and ready for further actions
// debugging log statememnet  (not needed)
console.log('Form valid')
// redirect to the target page
location.href = "www.example.com"
}
}
};

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-3">
<label for="validationCustomUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend">@</span>
</div>
<input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>

如果你是一个初学者，我建议你远离库，只玩香草js/css。如果你在每一行代码上都陷入了研究的困境，那么从头开始构建一切。只有这样，你才能开始扰乱库之类的东西。