validation - 无法阻止使用 jQuery 表单插件验证失败时的文件上传

Question

这是我的表格:

<form id="frmUpload" action="../scripts/upload.php" method="post" enctype="multipart/form-data">
    <div id="sermonInfo">
        File: <input type="file" id="uploadedFile" name="uploadedFile" class="error"><br>
        <br>
        Title: <input type="text" id="title" name="sermonTitle" size="35" maxlength="100">
    </div>
</form>
<div id="uploadInfo">
    <div class="progress">
        <div class="statusBar" style="width: 0%;"></div>
        <div class="percent">0%</div>
    </div>

    <div id="status"></div>
    <br>
    <div id="required">Only mp3 files are allowed!</div>
</div>

这是我正在使用的 JS:

<script>
    $(function() {
        /*
         * Upload
         */
        // Reset validation and progress elements
        var formValid = true,
            percentVal = '0%';
        $('#uploadedFile, #title').removeClass('error');
        $('#status, #required').empty().removeClass();
        $('.statusBar').width(percentVal)
        $('.percent').html(percentVal);

        $('form').ajaxForm({
            beforeSend: function(e) {

                if (!ValidateUploadForm()) {
                    formValid = false;
                    console.log('validateuploadform returned false');
                } else {
                    console.log('validateuploadform returned true');
                    formValid = true;
                }

                console.log('in beforeSend. formValid: ' + formValid);

                if (!formValid) {
                    return false;
                }

            },
            uploadProgress: function(event, position, total, percentComplete) {
                console.log('in uploadProgress function. formValid: ' + formValid);
                if (formValid) {
                    var percentVal = percentComplete + '%';
                    $('.statusBar').width(percentVal)
                    $('.percent').html(percentVal);    
                }
            },
            complete: function(xhr) {
                console.log('in complete function. formValid: ' + formValid);
                if (formValid) {
                    console.log('xhr.responseText: ' + xhr.responseText);
                    console.log('formValid: ' + formValid);

                    if (xhr.responseText === 'success') {
                        $('.statusBar').width('100%');
                        $('.percent').html('100%');
                        $('#status').html('Successfully uploaded the file.').addClass('successUpload');

                        // Clear the form
                        ClearForm();

                    } else if (xhr.responseText === 'fail') {
                        $('#status').html('There was a problem uploading the file. Try again.<br>If the problem persists, contact your system administrator.').addClass('errorUpload');
                    }
                }
            }
        }); // End Upload Status Bar
    });

    function ValidateUploadForm() {
        // Reset errors and clear message
        $('#uploadedFile, #title').removeClass('error');
        $('#required').empty();

        var result = true;
            title = $('#title').val(),
            fileName = $('#uploadedFile').val();
            extension = $('#uploadedFile').val().split('.').pop();

        if (fileName !== '' && extension !== 'mp3') {
            $('#uploadedFile').addClass('error');
            $('#required').html('Only mp3 files are allowed!');
            return false;
        } else if (fileName === '') {
            result = false;
        } else if (title === '') {
            $('#title').addClass('error');
            result = false;
        }

        console.log('returning ' + result + ' from the validateuploadform function');

        if (!result) { $('#required').html('All fields are required.'); }
            return result;
        }

        function ClearForm() {
            $('#uploadedFile, #title').val('').removeClass();
    }
</script>

如您所见，我正在使用控制台输出来密切关注正在发生的事情。

我的问题是，如果选择了一个文件，文件仍然会上传，无论 formValid(在 beforeSend 中)是真还是假。

我尝试在 return false; 之前添加 preventDefault。我还尝试清除 if (!formValid) {} block 中的文件输入。如您所见，我包装了 uploadProgress 和 complete 函数来检查 formValid 是否为 false。如果 uploadProgress 中的控制台输出显示 formValid 为 false，文件仍会上传。

我在这里错过了什么？如果验证失败，如何阻止文件上传？

Answer 1

我终于弄清楚了问题:我将我的脚本与一些在线示例进行比较，并注意到示例的回调名为 beforeSubmit，但我使用的是 beforeSend。

奇怪的是，验证代码仍在执行，但返回 false 并没有停止上传。