防止表单提交

Question

I have this:

$("#contact-frm-2").bind("jqv.form.result", function(event , errorFound){
    if(!errorFound){
        alert('go!');
        event.preventDefault();
        return false;                               
    }
});

It supposed to validate the form for errors and when there is no error on the form, alert "Go!" without submitting. I am using the jquery.ValidationEngine.js you can find at http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

I am sure

event.preventDefault();
            return false;

is supposed to prevent the form from submitting but it is still submitting. Can someone tell me what I am missing?

Answer 1

The "onsubmit" JavaScript event will handle this for you.

jQuery:

$('#formid').submit(function(e) {
    e.preventDefault();
});

Pure JS:

document.getElementById('formid').addEventListener('submit', function(e) {
    e.preventDefault();
});

Answer 2

$('#form_id').submit(function(e) {
    e.preventDefault();
    //...
});

Answer 3

Yes, return false; should prevent your form from being submitted, but only if you execute it on the actual submit event. Your code above looks like it is dependent on the plugin. Why don't you try attaching an additional listener to the actual submit button in your form.

$("#submit_btn").on('click',function(){
  return false;
});

Answer 4

The plugin has options that can be used. One of them is OnvalidationComplete which does the trick as shown below:

jQuery("#contact-frm-2").validationEngine('attach', {
   promptPosition : "centerRight", scroll: true,
   onValidationComplete: function(form, status){
   alert("The form status is: " +status+", it will never submit");
   }  
});

Full documentation is here http://posabsolute.github.com/jQuery-Validation-Engine/