How to make a button CSS change only IF form fields are valid

Currently my site has only a form and a button. The button contains a paper plane svg and some javascript that makes the plane fly off when the button is pushed.

What I need:

• The plane to fly off (CSS to change) only IF the form fields above are valid (name, email, message).


• Add a 1 second delay before submitting the form.

Right now the button is changing even though the fields are stating "this field is required" and the form has not submitted.

Here is a demo of my site Click the button and see.

I know that p tags shouldn't be within button tags, but the text in the button won't change (plane won't fly) unless p tags are used for some reason. If I remove the 'p' from this line within index.js $('button p').text(function(i, text) the plane won't be seen flying away

The HTML:

<form method="post" action="submit.php" class="signin"> 

     <input name="name" id="name" type="text" class="feedback-input" placeholder="Your Name" />   
    <input name="email" id="email" type="text" class="feedback-input" placeholder="Your Email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)"/>
   <textarea name="message" id="message" class="feedback-input" placeholder="Your Comment or Question" required></textarea>


 <button>

 <p>CLICK HERE</p>
  <svg version="1.1" xmlns="http://ift.tt/nvqhV5" xmlns:xlink="http://ift.tt/PGV9lw" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
    <path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z
M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path> 
  </svg>
</button>

  <script src='http://ift.tt/1wNH9tS'></script>

  <script src="js/index.js"></script>


  </form>

and index.js is:

$('button').click(function() {
  $(this).toggleClass('clicked');
  $('button p').text(function(i, text) {
    return text === "Why sent??" ? "Why Sent??" : "Why Sent??";
  });
});

How do I make the plane take off only after validation/submission _ a 1 second delay? Thank you kindly