客户端脚本验证不起作用答案

【问题标题】：client side script validation not working客户端脚本验证不起作用
【发布时间】：2018-10-11 09:30:04
【问题描述】：

将表单值添加到数据库的 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>

不工作它只是被重定向到表单操作

【问题讨论】：

我认为你应该使用onsubmit="IsFormValid()" 而不是onsubmit="return IsFormValid()"

标签： node.js mongodb express

【解决方案1】：

表单：给表单添加id

<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() 来停止表单的基本执行

更多详情请查看我在项目ref code中所做的验证

【讨论】：