Can JQuery.Validate Plugin Prevent Submission Of An Ajax Form

I am using the JQuery form plugin (http://malsup.com/jquery/form/) to handle the ajax submission of a form. I also have JQuery.Validate (http://docs.jquery.com/Plugins/Validation)

Solution 1:

You need to add a callback function for use with the beforeSubmit event when initializing the ajaxForm():

var options = {
        beforeSubmit: function() {
            return $('#searchForm').validate().form();
        },
        target: '#detailsView'
    };

Now it knows to check the result of the validation before it will submit the page.

Solution 2:

... well it's been a while so my situation has changed a little. Currently I have a submitHandler option passed to the Validate() plugin. In that handler I manually use ajaxSubmit. More a workaround than an answer I guess. Hope that helps.

http://jquery.bassistance.de/validate/demo/ajaxSubmit-intergration-demo.html

var v = jQuery("#form").validate({
    submitHandler: function(form) {
        jQuery(form).ajaxSubmit({target: "#result"});
    }
});

Solution 3:

$('#contactform').ajaxForm({
  success : FormSendResponse, 
  beforeSubmit:  function(){
    return $("#contactform").valid();
  }
});


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

Above code worked fine for me.

Solution 4:

Also make sure all of your input fields have a "name" attribute as well as an "id" attribute. I noticed the jquery validation plugin doesn't function correctly without these.

Solution 5:

ok, this is an old question but i will put our solution here for posterity. i personally classify this one as a hack-trocity, but at least it's not a hack-tacu-manjaro

<script type="text/javascript">
    var options = {
        target: '#detailsView'
    };

// -- "solution" --
$('#searchForm').submit(function(event) {
  this.preventDefault(event); // our env actually monkey patches preventDefault
                              // impl your own prevent default here
                              // basically the idea is to bind a prevent default
                              // stopper on the form's submit event
});
// -- end --

    $('#searchForm').ajaxForm(options);

    $('#searchForm').validate({
      rules: {
      username: {required:true}},
      messages: {
      username: {required:"Username is a required field."}}
    });
</script>