How to disable preventDefault in an event listener using Vanilla JS

user_9687611 0
Viewed 2619

Im still fairly new to JS and would like to be able to remove the event listener that stops the form submitting. I have tried multiple different solutions to do it in JS rather than jquery with no luck. The form currently does not submit, but i cannot get it to reverse should my 'if' conditions be false. 

    
    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>

Thanks in advance if anybody can help.

preventdefault addeventlistener javascript
1 Answers

I think you should return true/false from your validateForm() function to prevent/submit the form.

1. You have to return value from the function in the html markup: 

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

2. Return true/false from your validateForm() based on validation.

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. Does not required to prevent form submit so remove this code.

    var element = document.querySelector('form');
element.addEventListener('submit', event => {
event.preventDefault();
});
user_10819090
Related