How to fix form validation?

Question

JavaScript

I do the most simple validation for the authorization form, but as a result, when the button is pressed, the modal window is simply minimized.

HTML form:

<form id="main-form" method="post">
                            <div class="form-row">
                                <div class="col">
                                <div class="form-froup">
                                    <label for="inputName">Никнейм</label>
                                    <input type="name" name="name" class="form-control" id="name" aria-describedby="nameHelp" placeholder="Никнейм">
                                    <small id="nameHelp" class="form-text text-muted">Введите свой никнейм</small>
                                </div>
                                </div>
                                <div class="col">
                                <div class="form-froup">
                                    <label for="inputAvatar">Аватар</label>
                                    <input type="file" class="form-control" aria-label="file example">
                                    <small id="avatarHelp" class="form-text text-muted">Выберите автар (необязательно)</small>
                                </div>
                            </div>
                            </div>
                            <div class="form-row">
                                <div class="col">
                                <div class="form-froup">
                                    <label for="inputEmail">Адрес электронной почты</label>
                                    <input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Электронная почта">
                                    <small id="emailHelp" class="form-text text-muted">Введите свой адрес электронной почты</small>
                                </div>
                                </div>
                                <div class="col">
                                <div class="form-froup">
                                    <label for="inputPass">Пароль</label>
                                    <input type="pass" name="pass" class="form-control" id="pass" placeholder="Пароль">
                                    <small id="passHelp" class="form-text text-muted">Придумайте пароль не менее 8 символов</small>
                                </div>
                            </div>
                            </div>
                                <div class="form-check">
                                    <label class="form-check-label">
                                        <input type="checkbox" class="form-check-input">Запомнить меня
                                    </label>
                                </div>
                                <button type="submit" name="submit" onclick="checkValidation()" class="btn btn-primary">Войти</button>
                        </form>

JS:

document.getElementById("main-form");
        function checkValidation(){
            var name=document.getElementById("name");
            var email=document.getElementById("email");
            var pass=document.getElementById("pass");

            if(name==""){
                nameHelp.innerHTML="Заполните это поле";
                nameHelp.style.color="red";
            }
            else if(email==""){
                emailHelp.innerHTML="Заполните это поле";
                emailHelp.style.color="red";
            }
            else if(pass==""){
                passHelp.innerHTML="Заполните это поле";
                passHelp.style.color="red";
            }
            else if(email.split("@").length=1){
                emailHelp.innerHTML="Введите корректный имейл";
                emailHelp.style.color="red";
            }
            else if(name.length<1||name.length>50){
                nameHelp.innerHTML="Введите корректное имя";
                nameHelp.style.color="red";
            }
            else{
                window.location="https//youtube.com";
            }
        }

P.S. YouTube at the end is just for testing, the user page is still being done

Answer 1

const form = document.querySelector("#main-form");

form.addEventListener("submit", checkValidation);

function checkValidation(e) {
  e.preventDefault();
  //...
}