Я хотел бы использовать эти два плагина JQuery в одной форме:
Поведение, которое я хотел бы иметь:
- Подтвердите форму с помощью плагина проверки
- Если нет ошибок, начните загрузку и плагин uploadProgress. Если есть ошибки, покажите их и не запускайте плагин uploadProgress.
Два плагина хорошо работают отдельно. Когда я применяю оба в одной форме, это работает хорошо, если все правильно. Если в форме есть ошибки, запускается uploadProgress (запускаются функции запуска и выгрузки), но фактической загрузки нет. Он показывает панель загрузки, которая никогда не изменится, потому что форма не отправлена.
Я думаю, что проблема в том, что два плагина регистрируют что-то для выполнения при нажатии кнопки отправки.
Вот мой JavaScript (обновляется после первого ответа, но проблема все еще здесь):
/* ---------------------------------
* Parameters for the form validator
* --------------------------------- */
$.validator.setDefaults({
highlight: function(input) {
$(input).addClass("highlight");
},
unhighlight: function(input) {
$(input).removeClass("highlight");
}
});
$(document).ready(function(){
/* ----------------------
* Validator registration
* ---------------------- */
$("#upload_form").validate({
rules: {
title: {
required: true,
minlength: 5,
maxlength: 100
},
file: {
required: true,
accept: 'ogg|ogv|avi|mpe?g|mov|wmv|flv|mp4'
}
},
messages: {
title: {
required: "Please enter a title for the video",
minlength: jQuery.format("The title must be at least {0} characters long"),
maxlength: jQuery.format("The title must be shorter than {0} characters")
},
file: {
required: "Please choose a video file to upload",
accept: "Please choose a valid video file (ogg, ogv, avi, mpg, mpeg, mov, flv, mp4)"
}
}
});
/* ---------------
* Upload progress
* --------------- */
$('#upload_form').uploadProgress({
/* scripts locations for safari */
jqueryPath: "{{MEDIA_URL|default:'/media/'}}js/jquery.uploadProgress.js",
uploadProgressPath: "{{MEDIA_URL|default:'/media/'}}js/jquery.uploadProgress.js",
/* selector or element that will be updated */
progressBar: "#progress_indicator",
/* progress reports url */
progressUrl: '/upload/progress/',
/* function called just before starting the upload */
start: function() {
$("#upload_form").hide();
filename = $("#id_file").val().split(/[\/\\]/).pop();
fmts = gettext("Uploading %(filename)s...");
dat = {
filename: filename
};
s = interpolate(fmts,dat,true);
$("#progress_filename").html(s);
$("#progress_container").show();
},
/* function called each time bar is updated */
uploading: function(upload) {
if (upload.percents >= 100) {
window.clearTimeout(this.timer);
fmts = gettext("Saving %(filename)s...");
dat = {
filename: filename
};
s = interpolate(fmts,dat,true);
$("#progress_filename").html(s);
} else {
fmts = gettext("Uploading %(filename)s : %(percents)s%...");
dat = {
filename: filename,
percents: upload.percents
};
s = interpolate(fmts,dat,true);
$("#progress_filename").html(s);
}
},
/* how often will bar be updated */
interval: 1000
});
});
и соответствующий HTML:
<form id="upload_form" action="/upload/" method="post" enctype="multipart/form-data">
<label for="id_title">Title</label>: <input id="id_title" type="text" name="title"/>
<br/>
<label for="id_description">Description</label>: <input id="id_description" type="text" name="description" />
<br/>
<label for="id_file">File</label>: <input type="file" name="file" id="id_file" />
</div>
<div>
<!-- <button type="submit" class="accept" >Submit</button> -->
<input type="submit" value="Submit" />
</div>
</form>
<div id="progress_container">
<div id="progress_filename"></div>
<div id="progress_bar">
<div id="progress_indicator"></div>
</div>
</div>
Примечание: div progress_container скрывается через CSS при загрузке страницы.
Мое временное решение проблемы состояло в том, чтобы деактивировать проверку при отправке и использовать только другие события, но я также хотел бы проверить при отправке.