title: What's wrong with this form validation and AJAX submit?
body: <p>I have a simple form at my site which sends it data via Ajax and then slides a message down. The sending works fine, and the message slides down, but the validation part does not work. I want it to show an alert if user doesn't fill anything at all to the field. </p>
  
  <p>Here's the whole code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;title&gt;Coming Soon!&lt;/title&gt;
  
          &lt;!-- Our CSS stylesheet file --&gt;
          &lt;link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" /&gt;
          &lt;link rel="stylesheet" href="assets/css/styles.css" /&gt;
          &lt;link rel="stylesheet" href="assets/countdown/jquery.countdown.css" /&gt;
  
          &lt;!--[if lt IE 9]&gt;
            &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
          &lt;!-- JavaScript includes --&gt;
          &lt;script src="http://code.jquery.com/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
          &lt;script src="assets/countdown/jquery.countdown.js"&gt;&lt;/script&gt;
          &lt;script src="assets/js/script.js" charset="UTF-8"&gt;&lt;/script&gt;
          &lt;script&gt;
  
          $(function() {
      $(".submit").click(function() {
        var sposti = $("input#sposti").val();
          if (sposti == "") {
          alert ('Kirjoita nyt jotain herranjestas tuohon!');
          return false;
        }
  var dataString = $('#formi').serialize();
    //alert (dataString);return false;
    $.ajax({
      type: "POST",
      url: "mailer.php",
      data: dataString,
      success: function() {
       $("#thanks").slideDown('slow');
      }   
  
  
    });
    return false;
  
      });
    });
  
  
  
          &lt;/script&gt;
  
  
  &lt;/head&gt;
  
      &lt;body&gt;
      &lt;div id="thanks" style="width:100%; height:100px; background:url('../img/page_bg_center.jpg') no-repeat center center;
      position:absolute; top:0px; border-bottom:2px solid black; text-align:center; display:none;"&gt;&lt;span style="position:absolute; top:30px;"&gt;Kiitos! Saat tiedon kun sivusto avautuu :)&lt;/span&gt;&lt;/div&gt;
  
          &lt;div id="countdown"&gt;&lt;/div&gt;
  
          &lt;p id="note"&gt;&lt;/p&gt;
          &lt;p style="text-align:center; color:#666666; text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.3);"&gt;Haluatko tiedon kun sivusto aukeaa? Anna s&amp;auml;hk&amp;ouml;postisi alle.&lt;br&gt;&lt;br&gt;&lt;/p&gt;
    &lt;form action="#" method="post" style="text-align:center;" id="formi"&gt;
          &lt;input type="email" name="sposti"&gt;&amp;nbsp;&lt;input type="submit" class="submit" style="width:50px;"&gt;
      &lt;/form&gt;
  
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>