Я хочу проверить свою форму перед отправкой файлов. У меня есть этот HTML-код:

{amp}lt;form role="form" action="#" id="my-dropzone" class="dropzone form-horizontal" method="post" enctype="multipart/form-data"{amp}gt; {amp}lt;input type="hidden" name="gal_id" value="{$galeria.gal_id}"{amp}gt; {amp}lt;div class="form-body"{amp}gt; {amp}lt;div class="alert alert-danger display-hide"{amp}gt; {amp}lt;button class="close" data-close="alert"{amp}gt;{amp}lt;/button{amp}gt; Você tem alguns erros no formulário. Por favor, verifique abaixo. {amp}lt;/div{amp}gt; {amp}lt;div class="alert alert-success display-hide"{amp}gt; {amp}lt;button class="close" data-close="alert"{amp}gt;{amp}lt;/button{amp}gt; O formulário foi validado com sucesso! Aguarde. {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label class="control-label col-md-3"{amp}gt;Ativo{amp}lt;/label{amp}gt; {amp}lt;div class="col-md-9"{amp}gt; {amp}lt;input type="checkbox" name="active" value="1" class="make-switch" data-on-color="success" data-off-color="danger" data-on-text="SIM" data-off-text="NÃO" {if $galeria.gal_active==1 or !$livre}checked{/if}{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label class="control-label col-md-3"{amp}gt;Título {amp}lt;span class="required"{amp}gt; * {amp}lt;/span{amp}gt;{amp}lt;/label{amp}gt; {amp}lt;div class="col-md-9"{amp}gt; {amp}lt;input type="text" name="title" placeholder="Título" class="form-control required" minlength="2" maxlength="100" value="{$galeria.gal_title}"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;h3 class="form-section"{amp}gt;Imagens{amp}lt;/h3{amp}gt; {amp}lt;div class="dropzone-previews"{amp}gt; {amp}lt;i class="fa fa-cloud-upload fa-3x pull-left hidden-xs hidden-sm"{amp}gt;{amp}lt;/i{amp}gt; {amp}lt;div class="pull-left"{amp}gt; {amp}lt;h4 style="margin-top: -10px;"{amp}gt; {amp}lt;strong{amp}gt;Arraste e solte ou clique aqui para enviar os arquivos{amp}lt;/strong{amp}gt; {amp}lt;br{amp}gt;{amp}lt;small{amp}gt;Formatos aceitos: JPG e PNG - Tamanho máximo: 5mb - Máximo de 500 arquivos{amp}lt;/small{amp}gt; {amp}lt;/h4{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="clearfix"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-actions"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col-md-offset-3 col-md-9"{amp}gt; {amp}lt;button type="submit" class="btn green-meadow"{amp}gt;{if !$livre}Adicionar{else}Salvar{/if}{amp}lt;/button{amp}gt; {amp}lt;a href="{$endereco}/galerias/listar" class="btn default"{amp}gt;Cancelar{amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/form{amp}gt; 

И вот мой код JS:

 var Galerias = function() { return { initForm: function() { var form = $('#my-dropzone'); var error = $('.alert-danger', form); var success = $('.alert-success', form); form.validate({ errorElement: 'span', //default input error message container errorClass: 'help-block help-block-error', // default input error message class focusInvalid: false, // do not focus the last invalid input ignore: "", // validate all fields including form hidden input errorPlacement: function(error, element) { // render error placement for each input type if (element.parent(".input-group").size() {amp}gt; 0) { error.insertAfter(element.parent(".input-group")); } else if (element.attr("data-error-container")) { error.appendTo(element.attr("data-error-container")); } else if (element.parents('.radio-list').size() {amp}gt; 0) { error.appendTo(element.parents('.radio-list').attr("data-error-container")); } else if (element.parents('.radio-inline').size() {amp}gt; 0) { error.appendTo(element.parents('.radio-inline').attr("data-error-container")); } else if (element.parents('.checkbox-list').size() {amp}gt; 0) { error.appendTo(element.parents('.checkbox-list').attr("data-error-container")); } else if (element.parents('.checkbox-inline').size() {amp}gt; 0) { error.appendTo(element.parents('.checkbox-inline').attr("data-error-container")); } else { error.insertAfter(element); // for other inputs, just perform default behavior } }, invalidHandler: function(event, validator) { //display error alert on form submit success.hide(); error.show(); }, highlight: function(element) { // hightlight error inputs $(element) .closest('.form-group').addClass('has-error'); // set error class to the control group }, unhighlight: function(element) { // revert the change done by hightlight $(element) .closest('.form-group').removeClass('has-error'); // set error class to the control group }, success: function(label) { label .closest('.form-group').removeClass('has-error'); // set success class to the control group }, submitHandler: function(form) { success.show(); error.hide(); $('button[type="submit"]', form).prop("disabled", true); $('button[type="submit"]', form).html('{amp}lt;i class="fa fa-spinner fa-spin"{amp}gt;{amp}lt;/i{amp}gt; Aguarde, enviando imagens...'); } }); }, initDropzone: function() { Dropzone.options.myDropzone = { url: endereco   '/src/galerias/upload.php', previewsContainer: ".dropzone-previews", clickable: ".dropzone-previews", acceptedFiles: 'image/*', autoProcessQueue: false, uploadMultiple: false, parallelUploads: 500, maxFiles: 500, maxFilesize: 5, // mb paramName: "file", init: function() { var myDropzone = this; $.get(endereco   '/src/galerias/getpics.php', function(data) { $.each(data, function(key, value) { var file = { serverId: value.name, size: value.size }; myDropzone.options.addedfile.call(myDropzone, file); myDropzone.options.thumbnail.call(myDropzone, file, galerias   "/galerias/"   value.name); }); }); this.element.querySelector("button[type=submit]").addEventListener("click", function(e) { initForm(); e.preventDefault(); e.stopPropagation(); myDropzone.processQueue(); }); this.on("sending", function() { $('button[type="submit"]').prop("disabled", true); $('button[type="submit"]').html('{amp}lt;i class="fa fa-spinner fa-spin"{amp}gt;{amp}lt;/i{amp}gt; Aguarde, enviando imagens...'); }); this.on("error", function(files, response) { alert('Ocorreu um erro no envio dos arquivos.'); }); this.on("maxfilesexceeded", function(file) { alert("O limite máximo de arquivos foi excedido."); }); this.on("complete", function(file) { if (this.getUploadingFiles().length === 0 {amp}amp;{amp}amp; this.getQueuedFiles().length === 0) { window.location.href = endereco   '/galerias/listar'; } }); this.on("addedfile", function(file) { var removeButton = Dropzone.createElement("{amp}lt;button class='btn red btn-xs btn-block'{amp}gt;Excluir{amp}lt;/button{amp}gt;"); var _this = this; removeButton.addEventListener("click", function(e) { e.preventDefault(); e.stopPropagation(); _this.removeFile(file); }); file.previewElement.appendChild(removeButton); }); } } } }; }(); . var Galerias = function() { return { initForm: function() { var form = $('#my-dropzone'); var error = $('.alert-danger', form); var success = $('.alert-success', form); form.validate({ errorElement: 'span', //default input error message container errorClass: 'help-block help-block-error', // default input error message class focusInvalid: false, // do not focus the last invalid input ignore: "", // validate all fields including form hidden input errorPlacement: function(error, element) { // render error placement for each input type if (element.parent(".input-group").size() {amp}gt; 0) { error.insertAfter(element.parent(".input-group")); } else if (element.attr("data-error-container")) { error.appendTo(element.attr("data-error-container")); } else if (element.parents('.radio-list').size() {amp}gt; 0) { error.appendTo(element.parents('.radio-list').attr("data-error-container")); } else if (element.parents('.radio-inline').size() {amp}gt; 0) { error.appendTo(element.parents('.radio-inline').attr("data-error-container")); } else if (element.parents('.checkbox-list').size() {amp}gt; 0) { error.appendTo(element.parents('.checkbox-list').attr("data-error-container")); } else if (element.parents('.checkbox-inline').size() {amp}gt; 0) { error.appendTo(element.parents('.checkbox-inline').attr("data-error-container")); } else { error.insertAfter(element); // for other inputs, just perform default behavior } }, invalidHandler: function(event, validator) { //display error alert on form submit success.hide(); error.show(); }, highlight: function(element) { // hightlight error inputs $(element) .closest('.form-group').addClass('has-error'); // set error class to the control group }, unhighlight: function(element) { // revert the change done by hightlight $(element) .closest('.form-group').removeClass('has-error'); // set error class to the control group }, success: function(label) { label .closest('.form-group').removeClass('has-error'); // set success class to the control group }, submitHandler: function(form) { success.show(); error.hide(); $('button[type="submit"]', form).prop("disabled", true); $('button[type="submit"]', form).html('{amp}lt;i class="fa fa-spinner fa-spin"{amp}gt;{amp}lt;/i{amp}gt; Aguarde, enviando imagens...'); } }); }, initDropzone: function() { Dropzone.options.myDropzone = { url: endereco   '/src/galerias/upload.php', previewsContainer: ".dropzone-previews", clickable: ".dropzone-previews", acceptedFiles: 'image/*', autoProcessQueue: false, uploadMultiple: false, parallelUploads: 500, maxFiles: 500, maxFilesize: 5, // mb paramName: "file", init: function() { var myDropzone = this; $.get(endereco   '/src/galerias/getpics.php', function(data) { $.each(data, function(key, value) { var file = { serverId: value.name, size: value.size }; myDropzone.options.addedfile.call(myDropzone, file); myDropzone.options.thumbnail.call(myDropzone, file, galerias   "/galerias/"   value.name); }); }); this.element.querySelector("button[type=submit]").addEventListener("click", function(e) { initForm(); e.preventDefault(); e.stopPropagation(); myDropzone.processQueue(); }); this.on("sending", function() { $('button[type="submit"]').prop("disabled", true); $('button[type="submit"]').html('{amp}lt;i class="fa fa-spinner fa-spin"{amp}gt;{amp}lt;/i{amp}gt; Aguarde, enviando imagens...'); }); this.on("error", function(files, response) { alert('Ocorreu um erro no envio dos arquivos.'); }); this.on("maxfilesexceeded", function(file) { alert("O limite máximo de arquivos foi excedido."); }); this.on("complete", function(file) { if (this.getUploadingFiles().length === 0 {amp}amp;{amp}amp; this.getQueuedFiles().length === 0) { window.location.href = endereco   '/galerias/listar'; } }); this.on("addedfile", function(file) { var removeButton = Dropzone.createElement("{amp}lt;button class='btn red btn-xs btn-block'{amp}gt;Excluir{amp}lt;/button{amp}gt;"); var _this = this; removeButton.addEventListener("click", function(e) { e.preventDefault(); e.stopPropagation(); _this.removeFile(file); }); file.previewElement.appendChild(removeButton); }); } } } }; }(); . var Galerias = function() { return { initForm: function() { var form = $('#my-dropzone'); var error = $('.alert-danger', form); var success = $('.alert-success', form); form.validate({ errorElement: 'span', //default input error message container errorClass: 'help-block help-block-error', // default input error message class focusInvalid: false, // do not focus the last invalid input ignore: "", // validate all fields including form hidden input errorPlacement: function(error, element) { // render error placement for each input type if (element.parent(".input-group").size() {amp}gt; 0) { error.insertAfter(element.parent(".input-group")); } else if (element.attr("data-error-container")) { error.appendTo(element.attr("data-error-container")); } else if (element.parents('.radio-list').size() {amp}gt; 0) { error.appendTo(element.parents('.radio-list').attr("data-error-container")); } else if (element.parents('.radio-inline').size() {amp}gt; 0) { error.appendTo(element.parents('.radio-inline').attr("data-error-container")); } else if (element.parents('.checkbox-list').size() {amp}gt; 0) { error.appendTo(element.parents('.checkbox-list').attr("data-error-container")); } else if (element.parents('.checkbox-inline').size() {amp}gt; 0) { error.appendTo(element.parents('.checkbox-inline').attr("data-error-container")); } else { error.insertAfter(element); // for other inputs, just perform default behavior } }, invalidHandler: function(event, validator) { //display error alert on form submit success.hide(); error.show(); }, highlight: function(element) { // hightlight error inputs $(element) .closest('.form-group').addClass('has-error'); // set error class to the control group }, unhighlight: function(element) { // revert the change done by hightlight $(element) .closest('.form-group').removeClass('has-error'); // set error class to the control group }, success: function(label) { label .closest('.form-group').removeClass('has-error'); // set success class to the control group }, submitHandler: function(form) { success.show(); error.hide(); $('button[type="submit"]', form).prop("disabled", true); $('button[type="submit"]', form).html('{amp}lt;i class="fa fa-spinner fa-spin"{amp}gt;{amp}lt;/i{amp}gt; Aguarde, enviando imagens...'); } }); }, initDropzone: function() { Dropzone.options.myDropzone = { url: endereco   '/src/galerias/upload.php', previewsContainer: ".dropzone-previews", clickable: ".dropzone-previews", acceptedFiles: 'image/*', autoProcessQueue: false, uploadMultiple: false, parallelUploads: 500, maxFiles: 500, maxFilesize: 5, // mb paramName: "file", init: function() { var myDropzone = this; $.get(endereco   '/src/galerias/getpics.php', function(data) { $.each(data, function(key, value) { var file = { serverId: value.name, size: value.size }; myDropzone.options.addedfile.call(myDropzone, file); myDropzone.options.thumbnail.call(myDropzone, file, galerias   "/galerias/"   value.name); }); }); this.element.querySelector("button[type=submit]").addEventListener("click", function(e) { initForm(); e.preventDefault(); e.stopPropagation(); myDropzone.processQueue(); }); this.on("sending", function() { $('button[type="submit"]').prop("disabled", true); $('button[type="submit"]').html('{amp}lt;i class="fa fa-spinner fa-spin"{amp}gt;{amp}lt;/i{amp}gt; Aguarde, enviando imagens...'); }); this.on("error", function(files, response) { alert('Ocorreu um erro no envio dos arquivos.'); }); this.on("maxfilesexceeded", function(file) { alert("O limite máximo de arquivos foi excedido."); }); this.on("complete", function(file) { if (this.getUploadingFiles().length === 0 {amp}amp;{amp}amp; this.getQueuedFiles().length === 0) { window.location.href = endereco   '/galerias/listar'; } }); this.on("addedfile", function(file) { var removeButton = Dropzone.createElement("{amp}lt;button class='btn red btn-xs btn-block'{amp}gt;Excluir{amp}lt;/button{amp}gt;"); var _this = this; removeButton.addEventListener("click", function(e) { e.preventDefault(); e.stopPropagation(); _this.removeFile(file); }); file.previewElement.appendChild(removeButton); }); } } } }; }(); . var Galerias = function() { return { initForm: function() { var form = $('#my-dropzone'); var error = $('.alert-danger', form); var success = $('.alert-success', form); form.validate({ errorElement: 'span', //default input error message container errorClass: 'help-block help-block-error', // default input error message class focusInvalid: false, // do not focus the last invalid input ignore: "", // validate all fields including form hidden input errorPlacement: function(error, element) { // render error placement for each input type if (element.parent(".input-group").size() {amp}gt; 0) { error.insertAfter(element.parent(".input-group")); } else if (element.attr("data-error-container")) { error.appendTo(element.attr("data-error-container")); } else if (element.parents('.radio-list').size() {amp}gt; 0) { error.appendTo(element.parents('.radio-list').attr("data-error-container")); } else if (element.parents('.radio-inline').size() {amp}gt; 0) { error.appendTo(element.parents('.radio-inline').attr("data-error-container")); } else if (element.parents('.checkbox-list').size() {amp}gt; 0) { error.appendTo(element.parents('.checkbox-list').attr("data-error-container")); } else if (element.parents('.checkbox-inline').size() {amp}gt; 0) { error.appendTo(element.parents('.checkbox-inline').attr("data-error-container")); } else { error.insertAfter(element); // for other inputs, just perform default behavior } }, invalidHandler: function(event, validator) { //display error alert on form submit success.hide(); error.show(); }, highlight: function(element) { // hightlight error inputs $(element) .closest('.form-group').addClass('has-error'); // set error class to the control group }, unhighlight: function(element) { // revert the change done by hightlight $(element) .closest('.form-group').removeClass('has-error'); // set error class to the control group }, success: function(label) { label .closest('.form-group').removeClass('has-error'); // set success class to the control group }, submitHandler: function(form) { success.show(); error.hide(); $('button[type="submit"]', form).prop("disabled", true); $('button[type="submit"]', form).html('{amp}lt;i class="fa fa-spinner fa-spin"{amp}gt;{amp}lt;/i{amp}gt; Aguarde, enviando imagens...'); } }); }, initDropzone: function() { Dropzone.options.myDropzone = { url: endereco   '/src/galerias/upload.php', previewsContainer: ".dropzone-previews", clickable: ".dropzone-previews", acceptedFiles: 'image/*', autoProcessQueue: false, uploadMultiple: false, parallelUploads: 500, maxFiles: 500, maxFilesize: 5, // mb paramName: "file", init: function() { var myDropzone = this; $.get(endereco   '/src/galerias/getpics.php', function(data) { $.each(data, function(key, value) { var file = { serverId: value.name, size: value.size }; myDropzone.options.addedfile.call(myDropzone, file); myDropzone.options.thumbnail.call(myDropzone, file, galerias   "/galerias/"   value.name); }); }); this.element.querySelector("button[type=submit]").addEventListener("click", function(e) { initForm(); e.preventDefault(); e.stopPropagation(); myDropzone.processQueue(); }); this.on("sending", function() { $('button[type="submit"]').prop("disabled", true); $('button[type="submit"]').html('{amp}lt;i class="fa fa-spinner fa-spin"{amp}gt;{amp}lt;/i{amp}gt; Aguarde, enviando imagens...'); }); this.on("error", function(files, response) { alert('Ocorreu um erro no envio dos arquivos.'); }); this.on("maxfilesexceeded", function(file) { alert("O limite máximo de arquivos foi excedido."); }); this.on("complete", function(file) { if (this.getUploadingFiles().length === 0 {amp}amp;{amp}amp; this.getQueuedFiles().length === 0) { window.location.href = endereco   '/galerias/listar'; } }); this.on("addedfile", function(file) { var removeButton = Dropzone.createElement("{amp}lt;button class='btn red btn-xs btn-block'{amp}gt;Excluir{amp}lt;/button{amp}gt;"); var _this = this; removeButton.addEventListener("click", function(e) { e.preventDefault(); e.stopPropagation(); _this.removeFile(file); }); file.previewElement.appendChild(removeButton); }); } } } }; }(); 

Когда я нажимаю кнопку отправки, форма проверяется initForm (); функция, включенная в эту строку:

 this.element.querySelector("button[type=submit]").addEventListener("click", function(e) { initForm(); e.preventDefault(); e.stopPropagation(); myDropzone.processQueue(); }); 

Это проблема! Форма подтверждена: хорошо! Но теперь мне нужно после того, как форма проверена, она возвращается к функции, которая делает файлы для загрузки.

Также необходимо, чтобы после проверки формы она была отправлена, если есть файлы для отправки или нет.

Как я могу это сделать? Спасибо ребята!