проверка скриптов на стороне клиента не работает

Question

код ejs для добавления значений формы в базу данных, при нажатии кнопки «Отправить» происходит перенаправление на admin / add.

<form name="addProduct" action="admin/add" method="post" onsubmit="return IsFormValid()">    
  <div class="row">
     <div id="msg-error">
        <div class="alert with-close alert-danger">
            <span class="badge badge-pill badge-danger">Error!!</span>
            <span id="error-text"></span>
         </div>
      </div>          
      <div class="col-12 mb-3">
         <label for="form-name">Product Name <span>*</span></label>
         <input type="text" class="form-control" id="form-name" name="name" value="">
      </div>
      <button type="submit" class="btn btn-primary btn-services rounded-btn">Add Product</button>
   </div>
</form>

Скрипт

<script>
        document.getElementById("msg-error").style.display = "none";

        function IsFormValid(){

            document.getElementById("msg-error").style.display = "none";
            var ProductName=document.getElementById("form-name").value;                 
            var RegName = /^[A-Za-z ]+$/;

            if( ProducName == ""){
                document.getElementById("msg-error").style.display = "block";
                document.getElementById("error-text").innerHTML="Enter Product Name";
                return false;                

            }else{
                alert ("Form Submitted Successfully!");
                return true;
            } 
        }

    </script>

Не работает, он просто перенаправляетсясформировать действие

Answer 1

Форма: добавить идентификатор в форму

<form id="addProductForm" name="addProduct" action="admin/add" method="post">    
  <div class="row">
     <div id="msg-error">
        <div class="alert with-close alert-danger">
            <span class="badge badge-pill badge-danger">Error!!</span>
            <span id="error-text"></span>
         </div>
      </div>          
      <div class="col-12 mb-3">
         <label for="form-name">Product Name <span>*</span></label>
         <input type="text" class="form-control" id="form-name" name="name" value="">
      </div>
      <button type="submit" class="btn btn-primary btn-services rounded-btn">Add Product</button>
   </div>
</form>

Скрипт: добавить прослушиватель событий в сценарий

<script>
        document.getElementById("msg-error").style.display = "none";

        document.querySelector("#addProductForm").addEventListener('submit',(event)=>{
            document.getElementById("msg-error").style.display = "none";
            var ProductName=document.getElementById("form-name").value;                 
            var RegName = /^[A-Za-z ]+$/;

            if( ProducName == ""){
                document.getElementById("msg-error").style.display = "block";
                document.getElementById("error-text").innerHTML="Enter Product Name";
                //return false;  
                event.preventDefault();

            }else{
                alert ("Form Submitted Successfully!");
                //return true;
            } 
        }

    </script>

Используйте event.preventDefault (), чтобы остановить базовое выполнение формы

Для получения более подробной информации проверьте правильность моей проверки в моем проекте код ссылки