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.
Hope someone can see the problem, cos i cant 🙁
when i test it on its own it seems to work ok so i think something is conflicting with it.
Ive tried using a jquery validation instead but that seems to mess up my UI datepicker. Ive been trying to fix this problem for 2 weeks now and not had any success at all
This is my form page code:
<script>
$(function() {
$("#datepicker").datepicker({
altField: '#date'
});
$('#submit').click(function() {
$('#output').html($('form').serialize());
});
});
</script>
<title>Can you guess when Ally McCoist will get the sack ???</title>
<script type="text/javascript">
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);
})();
</script>
</head>
<body>
<div id="container">
<div id="topbar">
<p> </p>
</div>
<!-- close topbar -->
<div id="home">
<div id="home-header">
<div id="form-entry">
<form method="post" action="send.php" id="theform" name="theform">
<input type="text" name="firstname" id="firstname" value="First Name" onFocus="this.value=''" this.onfocus = null class="yourinfo" ><br/>
<input type="text" name="lastname" id="lastname" value="Last Name" onFocus="this.value=''" class="yourinfo"><br/>
<input type="text" name="email" id="email" value="Email Address" onFocus="this.value=''" class="yourinfo"><br/>
<span style="color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:12px;">Ally McCoist will be sacked on</span>
<div id="datepicker"></div>
<input type="hidden" name="date" id="date">
<input type="image" src="images/submit-button-small.png" name="submit" id="submit" value="submit" style="margin-top:10px; margin-left:-2px;" >
</form>
</div>
</div>
<img src="images/can-you-guess-big.png" width="826" height="146" alt="" />
<div id="bottom-social">
<table width="450" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="170" valign="top">
<img src="images/share-facebook-small.png" width="138" height="12" alt="share on facebook" style="margin-bottom:5px;"><br />
<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><style> 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; }</style><a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" onclick="return fbs_click()" target="_blank" class="fb_share_link"><img src="images/recommend.png" width="89" height="23" alt="Recommend on Facebook"></a>
</td>
<td width="144" valign="top">
<img src="images/share-twitter-small.png" width="116" height="12" alt="share on twitter" style="margin-bottom:5px;"><br/>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</td>
<td width="36" valign="top"><img src="images/share-google-small.png" width="119" height="14" alt="share on twitter" style="margin-bottom:5px;" /><g:plusone size="medium"></g:plusone></td>
</tr>
</table>
<script type="text/javascript">
(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);
})();
</script>
</div>
</div><!-- close home -->
</div><!-- close container -->
</body>
</html>
This is code that im using to send the the DB:
<?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');
?>
And finally, this is the validation 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<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");
}
});
});
Have you loaded jQuery first and then loaded your plugins (if any) ?. Couldn’t tell you because you have not mentioned what datepicker script or plugin. Further you can install firebug to check the errors reported and can find the root cause.
Update:
I got the problem, you are loading validation.js first which is written in jQuery and needs jQuery library to be loaded first then only validation.js will work, so write like this,
Hope this will help!