如何使用Vanilla JS在事件监听器中禁用preventDefault

问题描述 投票:2回答:1

我仍然是JS的新手,并希望能够删除停止表单提交的事件监听器。我已经尝试了多种不同的解决方案来在JS而不是jquery中做到这一点而没有运气。表格目前没有提交,但如果我的“if”条件为假,我无法撤消。

    
    var element = document.querySelector('form');
    element.addEventListener('submit', event => {
    event.preventDefault();
    });
   
    function validateForm() {
    
    var error = "";

        if (document.getElementById("name").value == "") {
        
           error += "<p>Name field required</p>"
       
       
        } 
    
        if (document.getElementById("email").value == "") {
        
           error += "<p>Email field required</p>"
      
        } 
    
        if (document.getElementById("subject").value == "") {
        
           error += "<p>Subject field required</p>"
       
        } 
    
        if (document.getElementById("question").value == "") {
        
           error += "<p>Question field required</p>"
       
        } 
     
    
        if (error != "") {
    
        document.getElementById("errorDiv").style.display = "block";
    
        document.getElementById("errorDiv").innerHTML = "<b>There wer error(s) in the form, please complete all required fields</b>" + error;
    
    
    } else {
  
            var element = document.querySelector('form');
            element.removeEventListener('submit', event => {
            event.preventDefault();
            });
            }
   
}
    <div id="errorDiv"></div>
    <form id="contact_form" onsubmit="validateForm();">
    <button type="submit"></button>

如果有人可以提供帮助,请提前致谢

javascript addeventlistener preventdefault
1个回答
0
投票

我认为您应该从true/false函数返回validateForm()以防止/提交表单。

1.您必须从html标记中的函数返回值:

<form id="contact_form" onsubmit="return validateForm();">

2.根据验证从true/false返回validateForm()

function validateForm() {
  var error = "";
    ................
    ................
    ................
    if (error != "") {
       document.getElementById("errorDiv").style.display = "block";
       document.getElementById("errorDiv").innerHTML = "<b>There wer error(s) in the   form, please complete all required fields</b>" + error;
       return false;

   } else {
     return true;
  }
 }
  1. 不需要阻止表单提交,因此请删除此代码。 var element = document.querySelector('form'); element.addEventListener('submit', event => { event.preventDefault(); });
© www.soinside.com 2019 - 2024. All rights reserved.