Call the jquery download function only when form validation is successful

advertisements

This is my first post here. I have been looking for the answer to this for a while now and have looked at several posts in order to try and understand the syntax. Unfortunately, I have not been able to get this to work.

I have a file upload form and I am using the following script in conjunction with the jquery form plugin to modify my status bar during file upload.

<script>
(function() {
    var bar = $('.bar');
    var percent = $('.percent');
    var status = $('#status');
    $('#create_playlist').ajaxForm({
        uploadProgress: function(event, position, total, percentComplete) {
            if (percentComplete == 100) {
                status.html('Processing <img src="../images/loader.gif" />');
            } else {
                status.html('Uploading...');
            }
            var percentVal = percentComplete + '%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        complete: function(xhr) {
            status.html('Done! <img src="../images/success.png" />');
            window.location.reload(true);
    //      status.html(xhr.responseText);
        }
    });
})();
</script>

I am also using the following script of the same page to validate my form using the jquery validate plugin.

<script type="text/javascript">
$(document).ready(function(){
$("#create_playlist").validate({
            rules: {

                    newfile: {
                            required: true,
                            accept: "text/plain"
                    },

            },

            errorElement: "span",
            errorPlacement: function(error, element) {
            error.insertAfter(element);
            },   

            submitHandler: function(form) {
                form.submit();
            }
    });
});
</script>

Both of these scripts work well independently. However, if the second script shows validation errors, it does not currently prevent the first script from running.

What I would like to do is call the first script only when validation in the second script is successful. I believe that the fist script should be called instead of "form.submit();" in the following code from the second script.

submitHandler: function(form) {
    form.submit();
}

After attempts to place the first script inside the script handler of the second script or call the first script as a function, I still have not been successful. Any help with this would be much appreciated.


As per jQuery Validate documentation:

submitHandler (default: native form submit):

Type: Function()

Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it validated.

jQuery:

$(document).ready(function(){
    $("#create_playlist").validate({
            rules: {
                newfile: {
                    required: true,
                    accept: "text/plain"
                }
            },
            errorElement: "span",
            errorPlacement: function(error, element) {
                error.insertAfter(element);
            },
            submitHandler: function(form) {
                //form.submit(); <-- remove this... it's redundant because the plugin will submit when valid
                var bar = $('.bar');
                var percent = $('.percent');
                var status = $('#status');
                form.ajaxForm({
                    // your ajaxForm code here
                });
                return false;
            }
    });
});