Add validation to salesforce.com forms - php

Question

I've been tasked with adding validation to stop spam on a simple contact form. The only problem here is that all the form processing happens on salesforce.com's side. I don't have the file that processes the form so I can't just add simple form validation.
The form's action goes to salesforce as so:
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
I tried doing some javascript validation, but the form still submits no matter what. I have a feeling I need to change the form's action to a new php page I create. I can do the validation there, then if it passes I need to tell it to somehow go to this form action and finish the form processing?
I tried doing the hidden form field idea with jQuery, where you put in a hidden form field that only a bot would somehow fill out. So if that field has a value, then do an alert that it is spam, but this wouldn't work! The form just kept submitting.
Ugh, not sure, please help thanks!
=====EDIT====
What is wrong here?
my button
<input type="button" id="submit" value="Submit">
my jquery
jQuery(document).ready(function() {
jQuery('#submit').click(function() {
var human = $("#human").val();
if(human == 4 ){
$('#form_submit').submit();
}
else {
alert('Please answer the validation question correctly.');
}
});
});
my form action:
<form id="form_submit" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
and my "human" field:
<input id="human" maxlength="20" name="human" size="30" type="text" />

Answer 1

something like this should work:
Working Example
you want to prevent the default event that happens on form submission.
SO when they click enter, or submit, you want to preventDefault(), then you are free to do what you want. I did ajax as example, because ajax is awesome.
<form id="form_submit" method="POST">
<input type="text" name="email" value="" placeholder="for humans" id="email">
<input type="text" name="robots" value="" placeholder="for robots" id="human">
<input type="submit" value="GO!">
<script>
$("#form_submit").submit(function(e){
// when the form is submitted:
// if the value of #human isn't empty, its a robot
if ($("#human").val() !== "") {
alert('robot!');
return false;
}
// other form validation you may want:
if ($("#email").val() == ""){
alert('missing email');
return false;
}
// STOP THE FORM FROM SUBMITTING ON ITS OWN
e.preventDefault();
// do whatever else you have to do.
$.ajax({
url:"https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8",
data:"field1=value1&field2=value2", // this depends on what your server-side wants
type:"POST",
beforeSend:function(){console.log('sending..');},
error:function(response){console.log('error: ' + response);},
success:function(response){console.log('success!');},
complete:function(){console.log('finished.');}
});
});
</script>

Answer 2

Change your submit button to a normal button. In jQuery add a click method to perform your spam logic. When you really want to submit you can submit the page through jQuery.
Example:
<form id="form_submit" action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method=" POST">
$("#submit").click(function() {
if(!spam){
$('#form_submit').submit();
}
});