JavaScript валидация формы не срабатывает, хотя все выглядит правильно (JS включен в браузере)

У меня есть такая форма:

<form action="../handlers/user_registration.php" method="post" name="registerForm" onsubmit="return validateRegistration()">
    <div id="inputContainer">
        <input type="text" id="userFirstName" class="inputField" name="fName" placeholder="Имя" />
        <input type="text" id="userLastName" class="inputField" name="lName" placeholder="Фамилия" />
        <input type="text" id="userLogin" class="inputField" name="login" placeholder="Логин" />
        <input type="text" id="userMail" class="inputField" name="emailAddr" placeholder="Электронная почта" />
        <input type="password" id="userPass" class="inputField" name="userPassword" placeholder="Пароль" />
    </div>
    <div id="bottomSection">
        <a href="login.php" id="loginLink">Войти</a>
        <a href="reset.php" id="resetLink">Забыли пароль</a>
    </div>
    <div id="submitSection">
        <input type="submit" id="registerBtn" value="Зарегистрироваться" />
    </div>
</form>

И у меня есть такой JavaScript код для проверки пустых полей:

function validateRegistration() {
    var fName = document.forms["registerForm"]["fName"].value;
    var lName = document.forms["registerForm"]["lName"].value;
    var login = document.forms["registerForm"]["login"].value;
    var emailAddr = document.forms["registerForm"]["emailAddr"].value;
    var userPassword = document.forms["registerForm"]["userPassword"].value;
    
    if (fName == null || fName == "" || lName == null || lName == "" || login == null || login == "" || emailAddr == null || emailAddr == "" || userPassword == null || userPassword == "") {
        alert("Пожалуйста, заполните все поля формы");
        return false;
    }
}

Ничего не происходит и форма сразу отправляется к PHP скрипту. Как это исправить?

у меня была такая же фигня пару месяцев назад! твоя функция validateRegistration() не возвращает true когда валидация проходит. если все поля заполнены, функция просто заканчивается без return true, браузер видит undefined и отправляет форму. добавь return true в конце после всех проверок - должно помочь

А ты проверил, что скрипт вообще подключен? Может js файл не грузится или путь кривой? Набери в консоли validateRegistration() - если функция не найдена, то дело в подключении

Ещё один момент - убедись, что твой скрипт загружается до появления формы на странице. Если JS идёт после формы или загружается асинхронно, onsubmit не найдёт функцию, когда форма рендерится. Попробуй переместить скрипт в или используй addEventListener вместо атрибута onsubmit.