Как сделать проверку на валидацию перед сабмитом а после показать блок успешной отправки

Надо сделать валидацию перед сабмитом, а после показать блок успешной отправки.

Пробую так:

$(document).ready(function() {
      ('#submit').on('click', function() {
        var first_name = $('#first-name').val();
        var last_name = $('#last-name').val();
        var textarea = $('#textarea').val(); 
        var email = $('#email').val();
        var company = $('#company').val(); 
        var submit_button = $('#submit').val();
        $(".error").remove();
        if (first_name.length < 3) {
          $('#first- 
name').addClass('invalid').after('<span 
class="error">Must be at least 3 
characters</span>');
        } else {
          $('#first-name').removeClass('invalid');
        }
        if (last_name.length < 3) {
          $('#last- 
 name').addClass('invalid').after('<span 
 class="error">Must be at least 3 
 characters</span>');
        } else {
          $('#last-name').removeClass('invalid');
        }
        if (textarea.length < 3) {
$('#textarea').addClass('invalid').after('<span 
 class="error">Must be at least 3 
characters</span>');
        } else {
          $('#textarea').removeClass('invalid');
        }  
        if (email.length < 3) {
 $('#email').addClass('invalid').after('<span 
 class="error">Must 
 be at least 3 characters</span>');
        } else {
 var regEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\ 
 [\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9] 
 {1,3}\.[0-9]{1,3}\.[0-9] 
  {1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
          var validEmail = regEx.test(email);
          if (!validEmail) {
 $('#email').addClass('invalid').after('<span 
  class="error">Enter a valid email</span>');
          } 
        }
        if (company.length < 3) {
$('#company').addClass('invalid').after('<span 
 class="error">Must be at least 3 
characters</span>');
        } else {
          $('#company').removeClass('invalid');
        }
       $('#first_form').submit(function(e) {
          $('.success-message').fadeIn();      
          $('.contact-form').fadeOut();
       })   
       $('#first_form').submit()
  })
    });
 /html/
 <form class="contact-form" id="first_form" 
action="#">
              <span class="contact-form__title"> 
 More Consumers, <span 
 class="contact-form__title "> Please! </span> 
 </span>
              <div class="field-container">
                      <div class="field"> 
                        <label class="contact- 
form__label" for="first- 
 name"> First Name:*</label>
                        <input class="contact- 
form__input" type="text" 
name="first-name" id="first-name">
                      </div>
                      <div class="field">
                            <label class="contact- 
 form__label" for="last- 
 name"> Last Name:* </label>
                            <input class="contact- 
 form__input" 
 type="text" name="last-name" id="last-name">
                      </div>
              </div>
              <div class="field">
                <label class="contact-form__label" 
for="company"> 
Company:* </label>
                <input class="contact-form__input" 
type="text" 
name="company" id="company">
              </div>
              <div class="field">
                <label class="contact-form__label" 
 for="email"> Email:* 
 </label>
                <input class="contact-form__input" 
 type="text" 
 name="email" id="email">
              </div> 
               <div class="field">
                <label class="contact-form__label" 
for="textarea"> How we 
 can help you:* </label>
                <input class="contact-form__area" 
 type="text" 
 name="textarea" id="textarea">
                </input>
              </div>
              <button class="contact-form__submit- 
 button" value="submit" 
 id='submit'> submit </button> 
        </form>