title: Why on event submit it excute another function?
body: <p>I am making a form, I have a function to reset all the fields, and I have a function to validate the fields. I have two buttons, send email and reset form. The botton to send the email it is <code>type = &quot;submit&quot;</code>, and the reset button is a simple button.</p>
  <p>The problem is when I click the reset button, it executes the send function, it is something like the browser think reset button is submiting the the form.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//Variables
  const sendBtn = document.querySelector("#enviar");
  const resetBtn = document.querySelector("#resetBtn");
  const email = document.querySelector("#email");
  const subject = document.querySelector("#asunto");
  const message = document.querySelector("#mensaje");
  const form = document.querySelector("#enviar-mail");
  const re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  
  
  loadEventListeners()
  //eventlistener
  function loadEventListeners() {
      //when the app starts
      document.addEventListener("DOMContentLoaded", startApp);
  
      //form fields
      email.addEventListener("blur", validateForm);
      subject.addEventListener("blur", validateForm);
      message.addEventListener("blur", validateForm);
  
      //submit button
      form.addEventListener("submit", sendEmail);
  
      //reset form
      resetBtn.addEventListener("click", resetFields);
  
  
  }
  
  //functions
  function startApp() {
      sendBtn.disabled = true;
      sendBtn.classList.add("cursor-not-allowed", "opacity-50");
  }
  
  //validate form
  function validateForm(e) {
  
      //validate if there is text on the field
      if(e.target.value.length &gt; 0 ) {
          //delete the errors
          const error = document.querySelector("p.error");
          if(error){
              error.remove();
          };
          
          e.target.style.border = "2px solid green";
  
      }else {
          e.target.style.border = "2px solid red";
          showError("Todos los campos son obligatorios");
      };
  
      //validate email with regular expresion
      if(e.target.type === "email") {
          
  
          if(re.test( e.target.value ) ) {
              const error = document.querySelector("p.error");
              if(error){
                  error.remove();
              };
              e.target.style.border = "2px solid green";
          } else if(e.target.value === ""){
              const error = document.querySelector("p.error");
              if(error){
                  error.remove();
              };
              showError("Todos los campos son obligatorios");
          } else {
              e.target.style.border = "2px solid red";
              showError("El email no es correcto!");
          }
      }
  
      //if everything is ok
      if( re.test( email.value ) &amp;&amp; message.value !== "" &amp;&amp; subject.value !== ""){
          sendBtn.disabled = false;
          sendBtn.classList.remove("cursor-not-allowed", "opacity-50");
      }
  
  }
  
  function showError(message) {
      let textError = document.createElement("p");
      textError.textContent = message;
      textError.style.border = "1px solid red";
      textError.style.color = "red";
      textError.style.marginTop = "5px";
      textError.classList.add("error"); //to identify the error message
  
      //avoid duplicate error message
      const errors = document.querySelectorAll(".error"); //to know if there is an error
      if(errors.length &lt; 1) {
          form.appendChild(textError);
      };
  
  }
  
  function sendEmail(e) {
      e.preventDefault();
  
      //Showing the spinner
      const spinner = document.querySelector("#spinner");
      spinner.style.display = "flex";
  
      //after 3 seconds of showinf the spinner
  
      setTimeout( () =&gt; {
          spinner.style.display = "none";
          console.log("mensaje enviado");
          resetFields();}, 3000);
  }
  
  function resetFields() {
      //#1 way
      // email.value = "";
      // subject.value = "";
      // message.value = '';
      // 
  
      //#2 way
      form.reset();
      email.style.border = "";
      subject.style.border = "";
      message.style.border = '';
  
      startApp();
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background: #43cea2;
      background: -webkit-linear-gradient(to right, #185a9d, #43cea2);
      background: linear-gradient(to right, #185a9d, #43cea2); 
  }
  #contenido {
      background-color: white;
      margin-top: 40px;
      -webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.3);
      box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.3);
  }
  #contenido::after {
      clear: both;
      display: block;
      content: '';
  }
  header {
      padding: 10px;
      text-align: center;
      color: white;
      font-size: 22px;
      font-family: 'Raleway', sans-serif;
      font-weight: 100;
  }
  form {
      margin: 30px 0;
  }
  #loaders {
      text-align: center;
  }
  #resetBtn {
      float: right;
  }
  
  #spinner {
      display: none;
      justify-content: center;
      padding: 3rem 0;
  }
  
  
  .sk-chase {
      width: 40px;
      height: 40px;
      position: relative;
      animation: sk-chase 2.5s infinite linear both;
    }
    
    .sk-chase-dot {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0; 
      animation: sk-chase-dot 2.0s infinite ease-in-out both; 
    }
    
    .sk-chase-dot:before {
      content: '';
      display: block;
      width: 25%;
      height: 25%;
      background-color: #0288d1;
      border-radius: 100%;
      animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
    }
    
    .sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
    .sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
    .sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
    .sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
    .sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
    .sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
    .sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
    .sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
    .sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
    .sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
    .sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
    .sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
    
    @keyframes sk-chase {
      100% { transform: rotate(360deg); } 
    }
    
    @keyframes sk-chase-dot {
      80%, 100% { transform: rotate(360deg); } 
    }
    
    @keyframes sk-chase-dot-before {
      50% {
        transform: scale(0.4); 
      } 100%, 0% {
        transform: scale(1.0); 
      } 
    }
  
    </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Raleway:100,300" rel="stylesheet"&gt;
      &lt;!-- &lt;link type="text/css" rel="stylesheet" href="https://github.com/albinr3/proyecto-enviar-email/blob/master/css/tailwind.min.css"  media="screen,projection"/&gt; --&gt;
      &lt;link rel="stylesheet" href="css/custom.css"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
      &lt;title&gt;Enviar Email&lt;/title&gt;
      &lt;script src="https://cdn.tailwindcss.com"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;div class="container mx-auto mt-20 bg-white"&gt;     
          &lt;header id="header" class="bg-pink-800 p-3 font-bold"&gt;
              Enviar Nuevo Mail
          &lt;/header&gt;
  
  
          &lt;form id="enviar-mail" class="py-10 px-5 max-w-lg mx-auto"&gt;
              &lt;div class="mb-10"&gt;
                  &lt;label for="email"&gt;Para:&lt;/label&gt;
                  &lt;input class="bg-gray-100 border shadow p-3 w-full"  id="email" type="email"&gt;
              &lt;/div&gt;
              &lt;div class="mb-10"&gt;
                  &lt;label for="asunto"&gt;Asunto&lt;/label&gt;
                  &lt;input class="bg-gray-100 border shadow p-3 w-full"  id="asunto" type="text"&gt;
              &lt;/div&gt;
              &lt;div class="mb-10"&gt; 
                  &lt;label for="mensaje"&gt;Mensaje&lt;/label&gt;
                  &lt;textarea class="bg-gray-100 border shadow p-3 w-full" id="mensaje"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
  
              &lt;div  id="spinner"&gt;
                  &lt;div class="sk-chase"&gt;
                      &lt;div class="sk-chase-dot"&gt;&lt;/div&gt;
                      &lt;div class="sk-chase-dot"&gt;&lt;/div&gt;
                      &lt;div class="sk-chase-dot"&gt;&lt;/div&gt;
                      &lt;div class="sk-chase-dot"&gt;&lt;/div&gt;
                      &lt;div class="sk-chase-dot"&gt;&lt;/div&gt;
                      &lt;div class="sk-chase-dot"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              
              &lt;div class="flex justify-between"&gt;
                      &lt;button 
                          id="enviar" class="w-full bg-blue-600 px-2 py-5 text-white items-center cursor-not-allowed opacity-50 mr-5 uppercase font-bold items-center flex justify-center" 
                          type="submit" 
                      &gt;Send
                          &lt;i class="material-icons right text-white ml-3"&gt;send&lt;/i&gt;
                      &lt;/button&gt;
  
                      &lt;button 
                          id="resetBtn" 
                          class="w-full bg-green-600 px-2 py-5 text-white items-center uppercase font-bold items-center flex justify-center"&gt;Reset Form&lt;i class="material-icons right ml-3"&gt;&lt;/i&gt;
                      &lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt; 
      &lt;/div&gt;
  
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>