How can I stop default submission of form using Vanilla JavaScript - forms

Question

I would like to stop default submission using Vanilla JavaScript. I created a sample of little form. But it gets refreshed when I submit the form even though I call the preventDefault() method. When I use input type="button" it works. But not works with input type="submit".
What will be the reason? Can anyone explain me what is the right method and what's wrong with the code?
My code is as follows:
let validation = () => {
let form = document.querySelector(".form");
form.addEventListener("submit", (event) => {
event.preventDefault();
});
}
<form action="" class="form" method="post" onsubmit="return validation()">
<input type="text">
<input type="submit" value="submit">
</form>
Optional Help: Can anyone give me a proper method or any good references on creating forms. Because when I search, I got lots of tutorials where all are says different methods and I really struggle to find out which method is the standard one.

Answer 1

Try the following changes to your code:
HTML
<form action="" class="form" method="post" onsubmit="validation(event)">
<input type="text">
<input type="submit" value="submit">
</form>
Try removing the return keyword and add event parameter.
JavaScript
const validation = event => {
event.preventDefault();
}
Using the preventDefault() method of event, the form is hopefully not submitted! Hopefully it works for you.