Javascript 如何验证使用Dropzone.js的表单？
我想在发送文件之前验证我的表单。我有以下HTML代码：Javascript 如何验证使用Dropzone.js的表单？,javascript,jquery,jquery-validate,dropzone.js,Javascript,Jquery,Jquery Validate,Dropzone.js,我想在发送文件之前验证我的表单。我有以下HTML代码： <form role="form" action="#" id="my-dropzone" class="dropzone form-horizontal" method="post" enctype="multipart/form-data"> <input type="hidden" name="gal_id" value="{$galeria.gal_id}"> <div class="f
<form role="form" action="#" id="my-dropzone" class="dropzone form-horizontal" method="post" enctype="multipart/form-data">
<input type="hidden" name="gal_id" value="{$galeria.gal_id}">
<div class="form-body">
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
Você tem alguns erros no formulário. Por favor, verifique abaixo.
</div>
<div class="alert alert-success display-hide">
<button class="close" data-close="alert"></button>
O formulário foi validado com sucesso! Aguarde.
</div>
<div class="form-group">
<label class="control-label col-md-3">Ativo</label>
<div class="col-md-9">
<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}>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Título <span class="required"> * </span></label>
<div class="col-md-9">
<input type="text" name="title" placeholder="Título" class="form-control required" minlength="2" maxlength="100" value="{$galeria.gal_title}">
</div>
</div>
<h3 class="form-section">Imagens</h3>
<div class="dropzone-previews">
<i class="fa fa-cloud-upload fa-3x pull-left hidden-xs hidden-sm"></i>
<div class="pull-left">
<h4 style="margin-top: -10px;">
<strong>Arraste e solte ou clique aqui para enviar os arquivos</strong>
<br><small>Formatos aceitos: JPG e PNG - Tamanho máximo: 5mb - Máximo de 500 arquivos</small>
</h4>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button type="submit" class="btn green-meadow">{if !$livre}Adicionar{else}Salvar{/if}</button>
<a href="{$endereco}/galerias/listar" class="btn default">Cancelar</a>
</div>
</div>
</div>
</form>
谢谢大家 为什么要在
提交点击initForm（）提交提交单击Galerias.initForm（）并删除此initForm（）在Dropzone.js函数中。例如，我在这里尝试过，当我开始键入表单时，表单会被验证，但当我单击带有空表单的提交按钮时，表单仍会被提交，文件上传也会开始。我想我需要在按钮点击中这样做，因为Dropzone插件。如果我错了，请纠正我@Sparky谢谢！在您成功地将其与另一个插件集成之前，您必须让验证插件正常工作。一旦DOM就绪，就会调用.validate（）
方法，并自动处理提交按钮的单击。。。您永远不需要submit
或单击事件处理程序或侦听器来促进其正常操作。因此，我需要将Dropzone函数放在submitHandler
函数中？我需要两个插件在加载页面时工作。submitHandler
是一个函数，只有在表单有效且单击按钮时才会触发。我不熟悉dropzone，否则我会把答案贴在下面。我猜dropzone
也需要在DOM ready中初始化。然后，您需要阅读这两个插件的文档，以查看在彼此内部使用哪些回调函数和选项。
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() > 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() > 0) {
error.appendTo(element.parents('.radio-list').attr("data-error-container"));
} else if (element.parents('.radio-inline').size() > 0) {
error.appendTo(element.parents('.radio-inline').attr("data-error-container"));
} else if (element.parents('.checkbox-list').size() > 0) {
error.appendTo(element.parents('.checkbox-list').attr("data-error-container"));
} else if (element.parents('.checkbox-inline').size() > 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('<i class="fa fa-spinner fa-spin"></i> 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('<i class="fa fa-spinner fa-spin"></i> 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 && this.getQueuedFiles().length === 0) {
window.location.href = endereco + '/galerias/listar';
}
});
this.on("addedfile", function(file) {
var removeButton = Dropzone.createElement("<button class='btn red btn-xs btn-block'>Excluir</button>");
var _this = this;
removeButton.addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
_this.removeFile(file);
});
file.previewElement.appendChild(removeButton);
});
}
}
}
};
}();
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
initForm();
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});