Conflicting Javascript preventing form validation
<p>Ive got some form validation on my page thats ment to display an error if fields havent been completed, but for  some reason the form is submitting even though fields are its empty... i need to get the errors to display if they have been left blank.</p>

<p>Hope someone can see the problem, cos i cant :(</p>

<p>when test only it own it seems to work so i think something is conflicting with it:</p>

<p><strong>This is my form page code:</strong></p>

<pre><code>&lt;script&gt;
        $(function() {
$("#datepicker").datepicker({
    altField: '#date'
});

$('#submit').click(function() {
    $('#output').html($('form').serialize());
});
});
&lt;/script&gt;

&lt;title&gt;Can you guess when Ally McCoist will get the sack ???&lt;/title&gt;

&lt;script type="text/javascript"&gt;

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-9915379-4']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div id="container"&gt;

&lt;div id="topbar"&gt;
&lt;p&gt;&amp;nbsp;&lt;/p&gt;
&lt;/div&gt;
&lt;!-- close topbar --&gt;

&lt;div id="home"&gt;
&lt;div id="home-header"&gt;



&lt;div id="form-entry"&gt;
&lt;form method="post" action="send.php" id="theform" name="theform"&gt;
&lt;input type="text" name="firstname" id="firstname" value="First Name" onFocus="this.value=''" this.onfocus = null class="yourinfo" &gt;&lt;br/&gt;
&lt;input type="text" name="lastname" id="lastname" value="Last Name" onFocus="this.value=''" class="yourinfo"&gt;&lt;br/&gt;
&lt;input type="text" name="email" id="email" value="Email Address" onFocus="this.value=''" class="yourinfo"&gt;&lt;br/&gt;
&lt;span style="color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:12px;"&gt;Ally McCoist will be sacked on&lt;/span&gt;
&lt;div id="datepicker"&gt;&lt;/div&gt;
&lt;input type="hidden" name="date" id="date"&gt;
&lt;input type="image" src="images/submit-button-small.png" name="submit" id="submit" value="submit" style="margin-top:10px; margin-left:-2px;" &gt;

&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;img src="images/can-you-guess-big.png" width="826" height="146" alt=""  /&gt;

&lt;div id="bottom-social"&gt;

&lt;table width="450" border="0" cellspacing="0" cellpadding="0"&gt;
&lt;tr&gt;
&lt;td width="170" valign="top"&gt;
&lt;img src="images/share-facebook-small.png" width="138" height="12" alt="share on facebook" style="margin-bottom:5px;"&gt;&lt;br /&gt;
&lt;script&gt;function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&amp;t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}&lt;/script&gt;&lt;style&gt; html .fb_share_link { padding:2px 0 0 20px; height:16px; background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?6:26981) no-repeat top left; }&lt;/style&gt;&lt;a rel="nofollow" href="http://www.facebook.com/share.php?u=&lt;;url&gt;" onclick="return fbs_click()" target="_blank" class="fb_share_link"&gt;&lt;img src="images/recommend.png" width="89" height="23" alt="Recommend on Facebook"&gt;&lt;/a&gt;
&lt;/td&gt;
&lt;td width="144" valign="top"&gt;
&lt;img src="images/share-twitter-small.png" width="116" height="12" alt="share on twitter" style="margin-bottom:5px;"&gt;&lt;br/&gt;
  &lt;a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal"&gt;Tweet&lt;/a&gt;&lt;script type="text/javascript" src="http://platform.twitter.com/widgets.js"&gt;&lt;/script&gt;

&lt;/td&gt;
&lt;td width="36" valign="top"&gt;&lt;img src="images/share-google-small.png" width="119" height="14" alt="share on twitter" style="margin-bottom:5px;" /&gt;&lt;g:plusone size="medium"&gt;&lt;/g:plusone&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

&lt;script type="text/javascript"&gt;
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();
&lt;/script&gt;

&lt;/div&gt;

&lt;/div&gt;&lt;!-- close home --&gt;


&lt;/div&gt;&lt;!-- close container --&gt;


&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>This is code that im using to send the the DB:</strong></p>

<pre><code>&lt;?php

//get the correct format
$new_date = date('Y-m-d',strtotime($_POST['date']));

mysql_connect ("localhost", "user", "pass") or die ('Error: ' . mysql_error());
mysql_select_db ("database");

$firstname = mysql_real_escape_string($_POST['firstname']);
$lastname = mysql_real_escape_string($_POST['lastname']);
$email = mysql_real_escape_string($_POST['email']);
$datepicker = mysql_real_escape_string($_POST['date']);

$query="INSERT INTO table (id, firstname, lastname, email, date) 
 VALUES (NULL, '".$firstname."', '".$lastname."', '".$email."',   '".mysql_real_escape_string($new_date)."')";

mysql_query($query) or die (mysql_error());  


header('Location: results.php');
?&gt;
</code></pre>

<p><strong>And finally, this is the validation code:</strong></p>

<pre><code>$(document).ready(function(){
// Place ID's of all required fields here.
required = ["firstname", "lastname", "email"];
// If using an ID other than #email or #error then replace it here
email = $("#email");
errornotice = $("#error");
// The text to show up within a field when it is incorrect
emptyerror = "Please fill out this field.";
emailerror = "Please enter a valid e-mail.";

$("#theform").submit(function(e){                

    //Validate required fields
    for (i=0;i&lt;required.length;i++) {
        var input = $('#'+required[i]);
        if ((input.val() == "") || (input.val() == emptyerror)) {
            input.addClass("needsfilled");
            input.val(emptyerror);
            errornotice.fadeIn(750);
        } else {
            input.removeClass("needsfilled");
        }
    }
    // Validate the e-mail.
    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
        email.addClass("needsfilled");
        email.val(emailerror);
    }

    //if any inputs on the page have the class 'needsfilled' the form will not submit
    if ($("input").hasClass("needsfilled")) {
         e.preventDefault();
    } else {
         errornotice.hide();
    }


});

// Clears any fields in the form when the user clicks on them
$(":input").focus(function(){       
   if ($(this).hasClass("needsfilled") ) {
        $(this).val("");
        $(this).removeClass("needsfilled");
   }
});
}); 
</code></pre>
