Question

我正在尝试使用jQuery Form插件实现一个表单。表单有三个文本字段和一个文件输入，我正在验证beforeSend回调中的表单。问题是，无论验证是否通过，处理文件上传的php脚本都会被加载到浏览器中，这显然不是我想要发生的事情 - 我需要留在表单的页面上。

您可以在http://www.eventidewebdesign.com/public/testUpload/查看表单及其相关文件。该目录的索引已打开，因此您可以查看所有相关文件。表单本身位于testUpload.php。

如果有人可以查看我的代码并帮我弄清楚这里发生了什么，我会很感激。

Answer 1

请编写以下脚本而不是您的脚本，这将有效。

<script>
            $(document).ready( function() {
                // Initialize and populate the datepicker
                $('#sermonDate').datepicker();
                var currentDate = new Date();
                $("#sermonDate").datepicker('setDate',currentDate);
                $("#sermonDate").datepicker('option',{ dateFormat: 'mm/dd/yy' });

                /*
                 * Upload
                 */
                // Reset validation and progress elements
                var formValid = true,
                    percentVal = '0%';
                $('#uploadedFile, #sermonTitle, #speakerName, #sermonDate').removeClass('error');
                $('#status, #required').empty().removeClass();
                $('.statusBar').width(percentVal)
                $('.percent').html(percentVal);

                $('#frmSermonUpload').ajaxForm({
                    beforeSend: function() {

                        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) {
                            $('#uploadedFile').val('');
                            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 sermon.').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, #sermonTitle, #speakerName, #sermonDate').removeClass('error');
                $('#required').empty();

                var result = true;
                    title = $('#sermonTitle').val(),
                    speaker = $('#speakerName').val(),
                    date = $('#sermonDate').val(),
                    fileName = $('#uploadedFile').val();
                    extension = $('#uploadedFile').val().split('.').pop().toLowerCase();

                //if (fileName !== '' && extension !== 'mp3') {
                if ((fileName === '') || (extension !== 'mp3')) {
                    $('#uploadedFile').addClass('error');
                    $('#required').html('Only mp3 files are allowed!');
                    return false;
                } else if (fileName === '') {
                    result = false;
                } else if (title === '') {
                    $('#sermonTitle').addClass('error');
                    result = false;
                } else if (speaker === '') {
                    $('#speakerName').addClass('error');
                    result = false;
                } else if (date === '') {
                    $('#sermonDate').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, #sermonTitle, #sermonDate, #speakerName').val('').removeClass();
            }

        </script>

浏览器使用jQuery Form插件提交表单后加载php脚本

1 个答案: