title: Adding other functions between Jquery calls
body: <p>Below you will find code for the program. Basically, I have jQuery calls that fades in and out divs. However, before Jquery fades out and fades in another div, I'd like to check form validation and user input. </p>
  
  <p>My question is, how do I properly add other functions in between the Jquery, like I have done so for validateForm(); &amp; validatePostalCode(); ?</p>
  
  <p>JQUERY</p>
  
  <pre><code>&lt;script type="text/jquery&gt;
      $(document).ready(function() {
          $("#welcome").fadeIn('fast');
  
          $('#forward').click(function(e) {
              $('#welcome').fadeOut('fast', function() {
                  $('#service').fadeIn('fast');
              });
          });
  
          $('#previous-service').click(function(e) {
              $('#service').fadeOut('fast', function() {
                  $('#welcome').fadeIn('fast');
              });
          });
  
          $('#next-service').click(function(e) {
              postalCode();
              validatePostalCode(true);
              $('#service').fadeOut('fast', function() {
                  $('#match').fadeIn('fast');
              });
          });
  
          $('#previous-match').click(function(e) {
              $('#match').fadeOut('fast', function() {
                  $('#service').fadeIn('fast');
              });
          });
  
          $('#next-match').click(function(e) {
              $('#match').fadeOut('fast', function() {
                  $('#information').fadeIn('fast');
              });
          });
  
          $('#previous-information').click(function(e) {
              $('#information').fadeOut('fast', function() {
                  $('#match').fadeIn('fast');
              });
          });
  
          $('#next-information').click(function(e) {
              validateForm();
              $('#information').fadeOut('fast', function() {
                  $('#confirmation').fadeIn('fast');
              });
          });
  </code></pre>
  
  <p></p>
  
  <hr>
  
  <p>JAVASCRIPT</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function validateForm() {
          var x = document.forms["#information"]["#first_name"].value;
          if (x == null || x == "") {
              alert("First name must be filled out");
              return false;
          }
      }
  
      function validatePostalCode() {
          var x = document.forms["#serviceForm"]["#postal"].value;
          if (x == null || x == "") {
              alert("Oops, the postal code must be filled out!");
              return false;
          }
      }
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      function postalCode() {
          var text = document.getElementById('postal').value;
      }
  &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <p>HTML</p>
  
  <pre><code>&lt;form id="informationForm" action="" onsubmit="return validateForm()" method=""&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="first_name"&gt;First Name&lt;/label&gt;
          &lt;input type="text" class="form-control" id="first_name" autofocus required&gt;
      &lt;/div&gt;
  </code></pre>