Javascript Girl
  1. Javascript Girl
  3. Validation de formulaire Dropzone
Intereting Posts
Aucune façon d'avoir des objets basés sur la classe en javascript? MVC à Vanilla JavaScript JQuery JSONP n'appelle pas le rappel Détecter que le navigateur n'a pas de souris et qu'il est tactile Android Chrome window.ununload Ajouter un canevas dans un autre canevas: obj.setCoords n'est pas une fonction (tissu js) JavaScript – window.onload – met le contenu d'un <div> </ div> sur une nouvelle fenêtre Le test Jasmine simule la décomposition des onglets et détecte l'élément nouvellement focalisé Comment utiliser Object.values ​​() sur le côté serveur dans Node.js Comment modifier les données AngularJS en dehors de la portée? Temps de décodage d'image depuis l'outil de développement Chrome Timeline Emberjs voit la liaison pour les marqueurs de cartes Google Comment puis-je rerender le bouton Pin It de Pinterest? Existe-t-il un moyen de détecter le côté sur lequel la touche Alt a été pressée (droite ou gauche)? Jquery pour changer l'attribut style d'une classe div

Validation de formulaire Dropzone

Je crée un formulaire de zone de dépôt en utilisant dropzone.js. Lorsque le formulaire soumet vide, le formulaire échoue en se soumettant à un ULR vide. Comment puis-je ré-valider le formulaire pour vérifier les champs ne sont pas vides?

C'est mon code. Merci pour votre aide.

CODE HTML (index.php) 

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <head> <link href="../CSS/dropzone.css" type="text/css" rel="stylesheet" /> </head> <body> 

 <form id="uploader" class="dropzone" action="upload.php"><BR> <BR> <div class="dropzone-previews"></div><BR><BR> <!-- this is were the previews should be shown. --> <div id="previews" class="dropzone-previews"></div> <!-- Now setup your input fields --> <input type="email" name="username" /> <input type="password" name="password" /> <input type="hidden" name="additionaldata" value="1" /> <button type="submit">Submit data and files!</button> </form> </body> </html>

Upload.php 

 <?php $ds = DIRECTORY_SEPARATOR; //1 $storeFolder = '../upload_test/uploads'; //2 if (!empty($_FILES)) { $tempFile = $_FILES['file']['tmp_name']; //3 $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds; //4 $targetFile = $targetPath. $_FILES['file']['name']; //5 $allowed = array('gif','png' ,'jpg'); $filename = $_FILES['file']['name']; $ext = pathinfo($filename, PATHINFO_EXTENSION); if(!in_array($ext,$allowed) ) { echo 'error'; move_uploaded_file($tempFile,$targetFile); //6 } ?> NEW JS custom.dropzone.js which seems to break the upload.php function Dropzone.options.myAwesomeDropzone = { // The camelized version of the ID of the form element // The configuration we've talked about above autoProcessQueue: false, parallelUploads: 3, maxFiles: 3, previewsContainer: ".dropzone-previews", accept: function(file, done) { console.log("uploaded"); done(); }, init: function() { this.on("maxfilesexceeded", function(file){ alert("No more files please!"); }); }, // The setting up of the dropzone init: function() { var myDropzone = this; // First change the button to actually tell Dropzone to process the queue. this.element.querySelector("button[type=submit]").addEventListener("click", function(e) { // Make sure that the form isn't actually being sent. e.preventDefault(); e.stopPropagation(); myDropzone.processQueue(); }); // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead // of the sending event because uploadMultiple is set to true. this.on("sendingmultiple", function() { // Gets triggered when the form is actually being sent. // Hide the success button or the complete form. }); this.on("successmultiple", function(files, response) { // Gets triggered when the files have successfully been sent. // Redirect user or notify of success. }); this.on("errormultiple", function(files, response) { // Gets triggered when there was an error sending the files. // Maybe show form again, and notify user of error }); } }

J'ai rencontré aujourd'hui un problème similaire. Dans mon cas, le formulaire a été construit avec Zend Form Builder (faisant toute la validation, …) pour le rendre court (au moins aussi court que possible):

  1. J'ai changé le fichier file de téléchargement de ma forme dans un champ de saisie de texte standard (pourrait même être caché) – comme un champ obligatoire .
  2. Ajouté dropzone au-dessus du formulaire, a créé l'action PHP requise qui ne fait que déplacer les fichiers du dossier php-tmp vers mon propre dossier tmp (projet spécifique) puis renvoie le nouveau chemin / nom de fichier comme json
  3. Dans js, j'ai ajouté une fonction "on succes" à ma zone de démarrage qui prend le résultat json et l'ajoute au contenu de mon champ de saisie (à partir de 1)
  4. L'action de ma forme actuelle prend ces chemins d'autres choses (comme générer des dossiers d'utilisateurs, …) et déplace ces fichiers (téléchargés via dropzone) dans ces nouveaux dossiers.

J'espère pouvoir aider un peu au moins;)

Dropzone.js est un cadre asynchrone. Si vous utilisez ce type de script, vous devez l'utiliser en pensant de cette façon.

Vous pouvez utiliser JQUERY (bibliothèque d'AJAX). Avec Jquery, vous pouvez vérifier votre valeur dans votre champ de vérification et vous envoyer une image sur le serveur en même temps.

J'espère que cela vous aide