时间戳

首页 > 解决方案 > 客户端脚本验证不起作用

node.js - 客户端脚本验证不起作用

问题描述

ejs 代码将表单值添加到数据库，当单击提交按钮时被重定向到管理员/添加。

<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>

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

标签： node.jsmongodbexpress

解决方案

表单：在表单中添加 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() 停止表单的基本执行

有关更多详细信息，请检查我在项目参考代码中所做的验证

推荐阅读