Databases
StackOverflow2013
Postsdbo
POConflicting Javascript preventing form validation
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POConflicting Javascript preventing form validation
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload