Can't submit after preventDefault

Question

I use a script for form validation (validationEngine) and a script for file upload (uploadify).

To best manage my form submission:

• validationEngine detects if my form can be sent.
• If I can submit, I upload my files
• Once all my uploaded files (onQueueComplete uploadify), I submit my form.

If I make an alert('foo'); in my onQueueComplete, it works. But if I submit my selector.submit() ... nothing happens.

$(function() {
    $('#file_upload').uploadify({
        'fileSizeLimit' : '2048KB',
        'auto': false,
        'swf'      : '<?php echo site_url('public/modules/uploadify/uploadify.swf')?>',
        'uploader' : '<?php echo site_url('public/modules/uploadify/uploadify.php')?>',
        'buttonText' : 'Ajouter...',
        'method' : 'post',
        'formData' : {'userMail' : '<?php echo $userMail ?>'},
        'onQueueComplete' : function(queueData) {
            $('#validator').submit();
        } 
    });
});

$(document).ready(function() {
    $("#validator").validationEngine();
    $('#validator').submit(function(event){
        event.preventDefault();
        var canSubmit = $("#validator").validationEngine('validate');
        if(canSubmit)
        {
            $('#file_upload').uploadify('upload','*');
        }
    });
});

With this code, all works but submit doesn't work. It's like the event doesn't exist.

Answer 1

Should it not be:

$('#validator').submit();

Answer 2

This method complicates the task myself. I decided to do a new routine easier.

I let the file load automatically. And I just created elements that I delete.

Anyway, to send my mail, file attachments will be destroyed.

here is my new code and it works.

/**
 * uploadify
 * 
 * we add a onUploadStart event to manage the file. uploadify uploads directly our files, but maybe the user missclick
 * and wants to remove some file.
 * 
 * The send action (controller webmail) doesn't upload files, uploadify do that for us.
 * We just need in the post for the name of the file registered in a hidden input.
 */
$(function() {
    $('#file_upload').uploadify({
        'fileSizeLimit' : '2048KB',
        'swf'      : '<?php echo site_url('public/modules/uploadify/uploadify.swf')?>',
        'uploader' : '<?php echo site_url('public/modules/uploadify/uploadify.php')?>',
        'buttonText' : 'Ajouter...',
        'method' : 'post',
        'formData' : {'userMail' : '<?php echo $userMail ?>'},
        'onUploadStart' : function(file){
            $('#uploadList').append('<div class="file"><a href="#" class="deleteFile" rel="'+file.name+'">'+file.name+' - [x]</a><input type="hidden" name="files[]" value="'+file.name+'" /></div>');
        }

    });

    /**
     * the .deleteFile elements are added after domready. We have to attach event click.
     * We remove the parent block to remove a file of mail attachment
     */
    $('#uploadList').on('click','.deleteFile',function(){
        var rel = $(this).prop('rel');
        /*$('input[value="'+rel+'"]').remove();*/
        $(this).parents('div:first').remove();
    });
});

$(document).ready(function() {
    $("#message").cleditor()[0].focus();

    $("#validator").validationEngine();     
});

Answer 3

Two things:

(1) Your selector elsewhere is #validator, whereas you are using validator in the non-functional call.

(2) You are preventDefaulting every submit event that originates on #validator, so even if the event was correctly triggered it would not execute a submit action. You need to call the native DOM element's submit action instead:

$('#validator')[0].submit();

[0] gets the native DOM element from the selection, and you then call the native submit function. This means no jQuery handlers are run, so the event.preventDefault call you make is also not run, so the event will function.