title: Dropzone form validation
body: <p>I am creating a drop zone form using dropzone.js. When the form submits empty the form fails by submitting to an empty ULR. How can I revalidate the form to check fields are not empty?</p>
  
  <p>This is my code. Thanks for all the help.</p>
  
  <p>HTML CODE (index.php)</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;head&gt;   
  &lt;link href="../CSS/dropzone.css" type="text/css" rel="stylesheet" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  </code></pre>
  
  <p>
       </p>
  
  <pre><code>&lt;form id="uploader" class="dropzone" action="upload.php"&gt;&lt;BR&gt;    &lt;BR&gt; 
    &lt;div class="dropzone-previews"&gt;&lt;/div&gt;&lt;BR&gt;&lt;BR&gt; &lt;!-- this is were the previews should be shown. --&gt;
   &lt;div id="previews" class="dropzone-previews"&gt;&lt;/div&gt;
    &lt;!-- Now setup your input fields --&gt;
    &lt;input type="email" name="username" /&gt;
    &lt;input type="password" name="password" /&gt;
    &lt;input type="hidden" name="additionaldata" value="1" /&gt;
  
    &lt;button type="submit"&gt;Submit data and files!&lt;/button&gt;
  &lt;/form&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>upload.php</p>
  
  <pre><code>&lt;?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
  
  }
  ?&gt;  
  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
    });
   }
  
  }
  </code></pre>