javascript - 验证与 dropzone 的组合范式

Question

如何在提交带有文件上传的表单之前验证输入字段(电子邮件、用户名)？ 可以在 dropzone 中集成 jquery 验证插件吗？

<form id="my-awesome-dropzone" class="dropzone">
 <div class="dropzone-previews"></div>

  <!-- Now setup your input fields -->
  <input type="email" id="email" name="email" />
  <input type="text" id="username" name="usename" />

  <button type="submit">Submit data and files!</button>
</form>

javascript dropzone 文件

Dropzone.options.myAwesomeDropzone = { 

// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,

// 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) {
    //I wont to put validation plugin here:

   $('#my-awesome-dropzone').validate({
     rules: {
        email: {
            required: true
        },
        usename: {
            required: true
        }
     }
  });

  e.preventDefault();
  e.stopPropagation();
  myDropzone.processQueue();
});

//...

Answer 1

Dropzone.options.myAwesomeDropzone = { 

autoProcessQueue: false,

uploadMultiple: true,

parallelUploads: 100,

maxFiles: 100,

init: function() {

var myDropzone = this;


this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {

if($('#my-awesome-dropzone').valid()){

  e.preventDefault();

  e.stopPropagation();

  myDropzone.processQueue();

}
});