I have a problem with user navigation in a contact form.
I have built (in Bootstrap) a contact form (more precisely a prototype of it, which does not yet need to store data etc), consisting of several pages, currently 3 pages. In this form I have several required fields. Below the form there is a button. Without validation the button looks like this:
<div class="row col-md-1 float-md-right">
<form action="next-page.html">
<button class="btn btn-primary" type="submit">Next</button>
</form>
</div>
And so the button takes me to the next page of the form.
I grabbed the bootstrap template from here for validation: https://getbootstrap.com/docs/4.6/components/forms/#validation and copied it into my main.js:
(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);
})();
Validation works with this JS snippet, but I don't get to the next page. How do I do this now?
I (regretfully) didn't use any frameworks like Angular, there would be the possibility of routing. But how do I get it to work like this now?
