title: Ajax validation before submit
body: <p>Apologies for opening what might be a basic question for more experienced users but Im learning Ajax it is a steep learning curve but I am slowly getting there. I have the following script which works perfectly, except for the client-side validation part. <strong>Im trying to stop the form from being submitted if form  field is empty</strong>. However my validation part is not working (it gets ignored / skipped)</p>
  
  <p>I would greatly appreciate it if someone with a bit of Ajax experience could give my code a scan and possibly advise where I am going wrong.</p>
  
  <pre><code> &lt;div id="depMsg"&gt;&lt;/div&gt;
  &lt;form name="dep-form" action="deposit/submitReference.php" id="dep-form" method="post"&gt;
          &lt;span style="color:red"&gt;Submit Reference Nr:&lt;/span&gt;&lt;br /&gt;
           &lt;input type="text" name="reference" value="" /&gt;&lt;br /&gt;
           &lt;span id="reference-info"&gt;&lt;/span&gt;&lt;br /&gt; 
          &lt;input type="submit" value="Submit" name="deposit" class="buttono" /&gt;
          &lt;/form&gt;
               &lt;/div&gt;
  
    $(function() {
  
           var valid
           //call validate function
           valid = validateDep()
           if(valid){
          // Get the form.
          var form = $('#dep-form');
  
          // Get the messages div.
          var formMessages = $('#depMsg');
  
          // Set up an event listener for the contact form.
          $(form).submit(function(e) {
              // Stop the browser from submitting the form.
              e.preventDefault();
  
              // Serialize the form data.
              var formData = $(form).serialize();
  
              // Submit the form using AJAX.
              $.ajax({
                  type: 'POST',
                  url: $(form).attr('action'),
                  data: formData
              })
              .done(function(response) {
          // Make sure that the formMessages div has the 'success' class.
          $(formMessages).removeClass('error').addClass('success');
  
          // Set the message text.
          $(formMessages).html(response); // &lt; html();
  
          // Clear the form.
          $('').val('')
      })
      .fail(function(data) {
          // Make sure that the formMessages div has the 'error' class.
          $(formMessages).removeClass('success').addClass('error');
  
          // Set the message text.
          var messageHtml = data.responseText !== '' ? data.responseText : 'Oops! An error occured and your message could not be sent.';
          $(formMessages).html(messageHtml); // &lt; html()
  }
      });
  
          });
  
      });
  
  function validateDep() {
      var valid = true;   
  
      if(!$("#reference").val()) {
          $("#reference-info").html("(required)");
          $("#reference").css('background-color','#FFFFDF');
          valid = false;
  }
  return valid;
      }
  
      &lt;/script&gt;
  </code></pre>