title: My form submits even with empty required fields
body: <p>I have a form on my page that fades into something else with a thank you picture and the like. All my <code>inputs</code> are <code>required</code>, but the fade still occurs when you don't fill out everything in the form.</p>
  
  <p>I think it's because I'm using an <code>input</code> element with <code>type="image"</code>, because when I'm using a normal button element, the fade doesn't occur unless I fill out everything.</p>
  
  <p>Extra info: The form does work in the backend, it's just that it shouldn't allow the change when not every input has been filled out.</p>
  
  <p>HTML (form)</p>
  
  <pre><code>&lt;form id="form" action="/" method="POST"&gt;
      &lt;div&gt;
          &lt;div class="inputName"&gt;
              &lt;label for="name"&gt;Name&lt;/label&gt;
              &lt;input class="input" type="text" id="name" name="name" required&gt;
          &lt;/div&gt;
  
          &lt;div class="inputEmail"&gt;
              &lt;label for="email"&gt;Email&lt;/label&gt;
              &lt;input class="input" type="text" id="email" name="email" required&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
          &lt;div class="inputSubject"&gt;
              &lt;label for="subject"&gt;Subject&lt;/label&gt;
              &lt;input class="input" type="text" id="subject" name="subject" required&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;textarea name="message" id="text" cols="30" rows="10" required&gt;&lt;/textarea&gt;
  
      &lt;input type="image" id="send" src='https://i.imgur.com/Tt39rjV.png' onmouseover="this.src='https://i.imgur.com/81fmcHg.png';" onmouseout="this.src='https://i.imgur.com/Tt39rjV.png';" border="0" alt="Send" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>EDIT: 
  Probably also important, my Javascript/jQuery that does the fading:</p>
  
  <pre><code>$('#message').click(function(e){    
      $('.contact1').fadeOut('slow', function(){
          $('.contact2').fadeIn('slow');
      });
  });
  
  $('#send').click(function(e){    
      $('.contact2').fadeOut('slow', function(){
          $('.contact3').fadeIn('slow');
      });
  });
  </code></pre>