Question

I need to validate a form using jQuery then submit it to a JavaScript file that redirects it to the confirmation/send mail page. The reason I am doing this is to prevent spam emails with out putting some type of Captcha in. I am basically putting in a wrong url for the post to page of the form and then changing that to the correct page in an external JavaScript file. Everything works great except the form submits before it validates. I can see it mark the errors for a slight second before it submits.

Validation JS:

<script type="text/javascript">
$(document).ready(function(){

    $('#contactform').submit(function() {
      return $('#contactform').valid();
    });

        $("#contactform").validate();

            $("#Name").rules("add", {
        required: true,
        minlength: 5,
        messages: {
        required: "Required",
        minlength: jQuery.format("Minimum {0} Characters Required")
     }   
    }); 
        $("#Question").rules("add", {
        required: true,
        minlength: 20,
        messages: {
        required: "Required",
        minlength: jQuery.format("Question Must Be {0} Character Long")
     }

    });

    $("#math").rules("add", {
        required: true,
        equalTo: "#math2",
        messages: {
        required: "Solve Security Question.",
     }
    });


});
</script>

External JS Redirect:

function submitCommentForm() {
    // Change the form action to the real submission page
    document.getElementById('contactform').action = "confirmation.php";
    // Submit the form
    document.getElementById('contactform').submit();
}

Answer 1

Change

$('#contactform').submit(function() {
  return $('#contactform').valid();
});

To

$('#contactform').submit(function() {
  if($(this).valid()){
    submitCommentForm();
  }else{
    alert('Please fix the errors within the form.');
  }
  return false;
});