-1

jQuery Form プラグインを使用してフォームを実装しようとしています。フォームには 3 つのテキスト フィールドとファイル入力があり、beforeSend コールバックでフォームを検証しています。問題は、検証に合格するかどうかにかかわらず、ファイルのアップロードを処理する php スクリプトがブラウザーに読み込まれることです。これは明らかに私が望んでいることではありません。フォームのページにとどまる必要があります。

http://www.eventidewebdesign.com/public/testUpload/で、フォームとそれに依存するファイルを確認できます。そのディレクトリのインデックス作成がオンになっているため、関連するすべてのファイルを確認できます。フォーム自体は testUpload.php にあります。

誰かが私のコードを見て、ここで何が起こっているのかを理解するのを手伝ってくれれば幸いです。

4

1 に答える 1

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>
于 2013-04-25T16:40:54.820 に答える