Form validated but still submitting without values? - php

Question

im using javascript validation to check for values within each form field before the form sends to the database but when i click submit the form still sends even without any values.
To test it i clicked on each of the fields to clear them and then tried submittin the button
here is the form
<form method="post" action="send.php" id="theform" name="theform">
<input type="text" name="firstname" id="firstname" value="First Name" onFocus="this.value=''" 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/>
<div id="datepicker"></div>
<input type="hidden" name="date" id="date">
<input type="image" src="images/sbmit-button.png" name="submit" height="49" width="190" id="submit" value="submit" style="margin-top:10px; margin-left:-2px;" >
</form>
heres the javascript
$(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(){
//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")) {
return false;
} else {
errornotice.hide();
return true;
}
});
// Clears any fields in the form when the user clicks on them
$(":input").focus(function(){
if ($(this).hasClass("needsfilled") ) {
$(this).val("");
$(this).removeClass("needsfilled");
}
});
});
im also linking to a jquery file:
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
ive tested it on its own and it seems to work but something seems to be over riding it and skipping past the validation in this page
==================================================================================
i still not working... basicallly do u think it might have something to do with the jquery UI datepicker that im also using with the form?? ive not included that in the form validation as i only wanted to make sure the firstname, lastname and email was filled out
i have this included in my form page:
<script>
$(function() {
$("#datepicker").datepicker({
altField: '#date'
});
$('#submit').click(function() {
$('#output').html($('form').serialize());
});
});
</script>
would this be having an effect of it submitting even though there are no values in the fields?
something is definatley overriding the validation and submitting it

Answer 1

It's working for me! (but it's probably not working how you imagine it should)
Once you enter a valid email, the form is sent if you hit submit. Why? Because you have already filled in firstname and lastname for the user - with the strings First Name and Last Name!
So you shouldn't just check for empty or error string filled first and last names, but you should also trigger an error if the first name is First Name or the last name is Last Name.
// Check for empty value, the error string
// OR the default values of "First Name" and "Last Name"
if ((input.val() == "") ||
(input.val() == emptyerror) ||
(input.val() == "First Name") ||
(input.val() == "Last Name")) {
input.addClass("needsfilled");
Working example
(I assume you use server side validation as the final check, since people like me just love NoScript. )
(Also you declare 5 global variables at the top of your code and one more global in your for loop (i)... don't forget var.. just like you used for input)

Answer 2

What if I disabled JavaScript? You should (also) validate on the server side.
Also refactor your code! You can start with extracting methods.

Answer 3

You need to cancel the submit event. It looks like you're trying to do this with a return false or a return true. However, with jQuery you'll need to do it a slightly different way.
First, you'll need to have an argument name for the JavaScript event. I typically use e.
$("#theform").submit(function(e){
Then you'll need to update the following code as follows:
//if any inputs on the page have the class 'needsfilled' the form will not submit
if ($(":input").hasClass("needsfilled")) {
e.preventDefault();
} else {
errornotice.hide();
}
The e.preventDefault() stops the event from being processed. In this case, that means the form will not be submitted.