Form won't submit after validation - validation

Question

I want to submit this form once its validate field, but it wont submit to the next page. I guess there something I need to add on jQuery.
Javascript:
(function() {
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
//$(this).trigger('submit');
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
HTML:
<form class="needs-validation" action="save.php" method="post" id="form" name="form" novalidate>
<div class="row">
<div class="col">
<div class="mb-3">
<label class="form-label" for="exampleFormControlInput20">Info</label>
<textarea class="form-control" id="exampleFormControlTextarea25" rows="3" placeholder="Fill in your info"></textarea>
<div class="invalid-tooltip">Fill in this field.</div>
</div>
</div>
</div>
<div class="card-footer text-end">
<div class="col-sm-9 offset-sm-3">
<button class="btn btn-success active" type="submit" title="Submit Info">Submit</button>
<button class="btn btn-danger active" type="reset" title="Cancel">Cancel</button>
</div>
</div>
</form>

Answer 1

(function() {
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
//$(this).trigger('submit');
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
<form class="needs-validation" action="save.php" method="post" id="form" name="form" novalidate>
<div class="row">
<div class="col">
<div class="mb-3">
<label class="form-label" for="exampleFormControlInput20">Info</label>
<textarea class="form-control" id="exampleFormControlTextarea25" rows="3" placeholder="Fill in your info" required minlength="10"></textarea>
<div class="invalid-tooltip">Fill in this field.</div>
</div>
</div>
</div>
<div class="card-footer text-end">
<div class="col-sm-9 offset-sm-3">
<button class="btn btn-success active" type="submit" title="Submit Info">Submit</button>
<button class="btn btn-danger active" type="reset" title="Cancel">Cancel</button>
</div>
</div>
</form>
When it passes validation you need to submit the form yourself.
if (form.checkValidity() === false)
{
event.preventDefault();
event.stopPropagation();
} else {
form.submit();
}