Je voudrais utiliser ces deux plugins JQuery sur la même forme:plugins JQuery: Utilisez jquery-upload-progress et validation jquery ensemble
- plugin validation JQuery: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
- JQuery-upload-progress: http://github.com/drogus/jquery-upload-progress
Le comportement que je voudrais avoir:
- Validez le formulaire avec le plugin de validation
- Si aucune erreur ne démarre le téléchargement et le plugin uploadProgress. En cas d'erreur, affichez-les et ne démarrez pas le plugin uploadProgress.
Les deux plugins fonctionnent bien séparément. Quand j'applique les deux sur le même formulaire, cela fonctionne bien si tout est correct. Lorsque le formulaire contient des erreurs, le fichier uploadProgress démarre (les fonctions de démarrage et de chargement s'exécutent), mais pas le téléchargement réel. Il montre une barre de téléchargement qui ne changera jamais parce que le formulaire n'est pas soumis.
Je pense que le problème vient du fait que les deux plugins enregistrent quelque chose à exécuter quand le bouton submit est pressé.
Voici mon JavaScript (mis à jour après la première réponse, mais le problème est toujours là):
/* ---------------------------------
* 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
});
});
Et le code HTML connexe:
<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>
Note: la div progress_container est caché par CSS au chargement de la page.
Mon correctif temporaire pour le problème était de désactiver la validation sur submit et d'utiliser uniquement les autres événements, mais je voudrais aussi valider sur submit.
Malheureusement je n'ai plus accès au code, c'était en 2010 ... Donc je ne peux pas tester ta réponse, désolé. Avez-vous pu le tester avec succès? –
Oui, je rencontre le même problème. et cette solution le corrige. – duzvik