Jquery Validation not preventing form submission - php

Question

I am using jquery validation 1.9.0. I have used the latest Jquery and on back to 1.6.0. with no change in result
My problem is this: When I deliberately put in the wrong values (not enough characters etc) the validation script rightfully shows the errors yet allows the script to be submitted anyways.
I have tried methods of validation including add rules, rules and the very simple form type below.
<script>
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
</script>
<script>
$(function() {
$("#comm").validate();
});
</script>
the form
<form action="comm.php" method="post" name="comm" id="comm">
Name: <input type="text" name="name" id="name" minlength="3" class="required" />
Email:<input type="email" name="email" id="email" class="required email" /> <br />
<label for="comment"> Comment </label> <br />
<textarea name="comment" id="comment" cols="80" rows="5" minlength="6" class="required" /></textarea>
<?php
date_default_timezone_set('America/New_York');
$date = date("Y-n-j h:i:s");?>
<input type="hidden" name="date" id="date" value="<?php echo $date; ?>" />
<?php $post_id = $id;?>
<input type="hidden" name="post_id" id="post_id" value="<?php echo $post_id; ?>" />
<?php $ip = $_SERVER["REMOTE_ADDR"]; ?>
<input type="hidden" name="ip" id="ip" value="<?php echo $ip; ?>" />
<input type="submit" value="Post" name="post" id="post" /> <input type="reset" value="Reset Form" name="reset" id="reset" />
</form>
Very simple stuff.
Submission happens on all my forms on the net, and all of them on localhost. I can always detect errors but never stop them. What am I doing wrong?
Firebug shows me submitting properly and no script errors. Also all jquerys are connected. Firebug also shows me this After submission novalidate="novalidate" in the form html. using onsubmit=return false does not change anything
I am using ajax to submit the form, works flawlessly
$(function() {
$("#comm").submit(function() {
var data = $('#comm').serialize();
alert (data); return false;
$.ajax({
url: "comm.php",
data: data,
type: "POST",
success: function(msg){
if(msg){
$('.comme').prepend().html(msg).show();
}else{
$('.comme').text("nothing came back");
}
}
});
return false;
});
});
Thank you

Answer 1

Try to do your Ajax handling after clicking the submit button instead of doing with jQuery form submission perhaps you're submitting the form data through Ajax only.
$(function() {
$("#post").click(function() {
var data = $('#comm').serialize();
// TODO: validate your data - $("#comm").validate();
// TODO: submit your form though ajax
// Other operations on form data
return false;
});
});
Note: If the form submission is happening with page redirection then try with 'onsubmit=return false;'.
Update:
I seems you've to submit the FORM from the validate function's submit callback handler(submitHandler) to avoid the redirection after submission. Please try to check this demo example which is working fine with Ajax form submission, review the source code of this example page and then adjust your code accordingly.
var v = jQuery("#form").validate({
submitHandler: function(form) {
jQuery(form).ajaxSubmit({
target: "#result"
});
}
});

Answer 2

If you're usig jquery to receive the form when it is submitted, then then you should specify the php file containing the jquery code as the action of the form, instead of "listening" the submit event. Another option would be letting the 'action' parameter empty. The point here is that you're sending the form twice: when you click summit, the form is automatically sent to the file specified in the 'action' parameter, (that is the submission that is taking place, because it has no validation); and, at the same time when you click submit, it also triggers the ajax request, which will perform the validation and in case of success do the submission again.