Javascript 验证带dropzone的组合范式

在使用文件上载提交表单之前，如何验证输入字段（电子邮件、用户名）？ 是否可以在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>

您的HTML：

<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>

---

演示：

对我来说，以上都不可行，所以我提供了以下内容：

环境名称


⇢ 这是我的义务。


⇢ Le fichier doit avoir联合国最大数据传输速率为10 Mbs


⇢ 收费格式：png、jpg、gif和pdf


特使

Dropzone.options.myDropzone={
url:“upload.php”，
paramName:“arquivo”，//与upload.php中使用的名称相同
自动处理队列：false，
uploadMultiple:false，
并行上传：5，
最大文件数：5，
最大文件大小：10，
acceptedFiles:'image/*'，
addRemoveLinks：是的，
init:function（）
{
dzClosure=this；//确保在下面的函数中理解“this”。
//要使Dropzone处理队列（而不是默认的表单行为），请执行以下操作：
document.getElementById（“全部提交”）.addEventListener（“单击”，函数（e）
{
//确保表单没有实际发送。
e、 预防默认值（）；
e、 停止传播（）；
if（document.getElementById（“ambiance”）.value=''document.getElementById（“resp1”）.innerHTML=“⇡；Champ obligatoire！”；
processQueue（）；
});
//将所有表单数据与文件一起发送：
this.on（“发送”，函数（文件、xhr、formData）
{
formData.append（“quem”，$（“#quem”）.val（）；
append（“id_cliente_poder”，$（“#id_cliente_poder”）.val（）；
});
this.on（'success'，函数（文件，resp）{
document.getElementById（'form-sucesso'）.innerHTML=“☺；存档téléchargéavec success！”；
});
}}

//PHP

$normalizeChars=数组(
‘Š’=>'S’、‘š’=>'S’、‘Ð’=>'Dj’、‘Ž’=>'Z’、‘À’=>'A’、‘Á’=>'A’、‘Ã’=>'A’、‘Ä’=>'A’，
Å'=>'A'，Æ'=>'A'，È'=>'C'，È'=>'E'，Ê'=>'E'，Ë'=>'E'，Ì'=>'I'，Í'=>'I'，Î'=>'I'，
‘Ï’=>'I’、‘Ï’=>'N’、‘Ò’=>'O’、‘Ó’=>'O’、‘Õ’=>'O’、‘Õ’=>'O’、‘Ø’=>'O’、‘Ù’=>'U’、‘Õ’=>'U’，
‘Û’=>‘U’、‘Ü’=>‘U’、‘Ý’=>‘Y’、‘Ý’=>‘B’、‘ß’=>‘Ss’、‘a’、‘á’=>‘a’、‘ã’=>‘a’、‘a’、‘a’、‘a’、‘a’、‘a’、‘a’、‘a’、‘a’、‘a’、‘a’、‘a’、‘a’、‘a’、‘，
‘å’=>'a’、‘æ’=>'a’、‘ç’=>'c’、‘è’=>'e’、‘ê’=>'e’、‘ì’=>'i’、‘î’=>'i’、‘î’=>'e’、‘ê’=>'e’、‘ì’=>'e’、‘ì’=>'i’、‘i’，
‘ï’=>‘i’、‘ð’=>‘o’、‘ñ’=>‘n’、‘ò’=>‘o’、‘ô’=>‘o’、‘õ’=>‘o’、‘ù’=>‘o’、‘ù’=>‘u’，
‘ú’=>‘u’、‘ý’=>‘u’、‘ý’=>‘y’、‘ý’=>‘y’、‘þ’=>‘b’、‘ÿ’=>‘y’、‘ƒ’=>‘f’，
‘ă’=>‘a’、‘î’=>‘i’、‘a’、‘ș’=>‘s’、‘ț’=>‘t’、‘Ă’=>‘a’、‘Î’=>‘i’、‘a’、‘Ș’=>‘s’、‘Ț’=>‘t’，
“'=>”、“=>”、“'=>”、“''=>”、“'=>”、“'=>”、“-”、“''=>”、“'=>”、”、“：'=>”、“'=>”、“=>”，
‘ê’、‘à’、‘é’、‘e’、‘ô’、‘e’、‘a’、‘e’、‘a’、‘a’、‘a’、‘e’、‘e’、‘e’、‘o’、‘e’、‘e’、‘a’、‘a’、‘a’、‘e’，
‘ã’=>‘a’，）；
$arquivo=''；
如果（isset（$\u FILES['arquivo']['tmp\u name']））$arquivo=$\u FILES['arquivo']['tmp\u name']；
如果（！空（$arquivo））{
$err=0；
$arquivo_name=strtr（$_文件['arquivo']['name']，$normalizeChars）；
$arquivo_size=$_文件['arquivo']['size']；
$arquivo_type=$_文件['arquivo']['type']；
如果（$arquivo_尺寸>10240000）{
$alert=“Votre archive ne peut pas dépasser 10 MBs”；
$err++；
}
如果（$err==0）{
$id_客户=''；
如果（$_会话['poder']==1）{
$id_cliente=$_POST['id_cliente_poder']；
$quem_vai='3dplan'；
}
否则{
$id_cliente=$_POST['id_cliente_poder']；
如果（$_POST['quem']='c'）$quem_vai='cotation'；
其他$quem_vai='envoye'；
}
$caminho=“yourfoldergoesher/$id\u客户/$quem\u vai”；
如果（！file_存在（$caminho））{
如果（！mkdir（$caminho，0755，true））{
$error=error_get_last（）；
echo$error['message']；
}}
$caminho=$caminho.'/'.$arquivo_name；
/*定义一个关于阿奎沃的支持*/
$ext=pathinfo（$arquivo\u名称，pathinfo\u扩展名）；
$allowed=array（'xlsx'，'xls'，'doc'，'docx'，'pdf'，'png'，'jpg'，'gif'，'jpeg'，'ai'，'cdr'，'zip'，'rar'，'gzip'，'xlsx'，'xls'，'docx'，'pdf'，'png'，'jpg'，'gif'，'jpeg'，'ai'，'cdr'，'zip'，'rar'，'gzip'）；
if（在数组中（$ext，$allowed））{
移动上传的文件（$arquivo，$caminho）；
$alert=“☺；存档téléchargéavec success！
”；
}
else$alert=“扩展无效存档”
“；}}else$alert=“S'il vous plaît poster un archive”；
回显“

”。$alert.



”；

在laravel中，您可以在单击“提交”按钮时验证请求。如果没有选择文件，则可以回调

    $validated = $request->validate([
        'file' => 'required',
    ]);

---

显示您尝试使用jQuery验证插件的情况。正如您在我的代码中看到的，验证必须在dropzone内。上传文件时，“提交”按钮处于活动状态。我不会将jQuery验证插件与dropzone集成。js@GoranRadovanovic，不，我在您的代码中看不到任何显示jQuery Validate的内容。除非在页面loa时表单不存在ds，没有理由将

validate（）

放在放置区代码内。我编辑了我的代码。现在，你可以看到我需要验证的地方。当我单击提交按钮时，文件上传的同时，表单提交了数据（电子邮件、用户名）。@GoranRadovanovic，正如怀疑的那样，你没有尝试我的解决方案。仅供参考，

.validate（）

方法只是插件的运行方式

$(document).ready(function () {

    $('#my-awesome-dropzone').validate({
        rules: {
            email: {
                required: true
            },
            usename: {
                required: true
            }
        },
        submitHandler: function(form) {
            // optional callback function
            // only fires on a valid form submission
            // do something only if/when form is valid
            // like process the dropzone queue HERE instead
            // then use .ajax() OR .submit()
            form.submit()
        }
    });

});

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();

}
});

$normalizeChars = array(
'Š'=>'S', 'š'=>'s', 'Ð'=>'Dj','Ž'=>'Z', 'ž'=>'z', 'À'=>'A', 'Á'=>'A', 'Â'=>'A', 'Ã'=>'A', 'Ä'=>'A',
'Å'=>'A', 'Æ'=>'A', 'Ç'=>'C', 'È'=>'E', 'É'=>'E', 'Ê'=>'E', 'Ë'=>'E', 'Ì'=>'I', 'Í'=>'I', 'Î'=>'I',
'Ï'=>'I', 'Ñ'=>'N', 'Ń'=>'N', 'Ò'=>'O', 'Ó'=>'O', 'Ô'=>'O', 'Õ'=>'O', 'Ö'=>'O', 'Ø'=>'O', 'Ù'=>'U', 'Ú'=>'U',
'Û'=>'U', 'Ü'=>'U', 'Ý'=>'Y', 'Þ'=>'B', 'ß'=>'Ss','à'=>'a', 'á'=>'a', 'â'=>'a', 'ã'=>'a', 'ä'=>'a',
'å'=>'a', 'æ'=>'a', 'ç'=>'c', 'è'=>'e', 'é'=>'e', 'ê'=>'e', 'ë'=>'e', 'ì'=>'i', 'í'=>'i', 'î'=>'i',
'ï'=>'i', 'ð'=>'o', 'ñ'=>'n', 'ń'=>'n', 'ò'=>'o', 'ó'=>'o', 'ô'=>'o', 'õ'=>'o', 'ö'=>'o', 'ø'=>'o', 'ù'=>'u',
'ú'=>'u', 'û'=>'u', 'ü'=>'u', 'ý'=>'y', 'ý'=>'y', 'þ'=>'b', 'ÿ'=>'y', 'ƒ'=>'f',
'ă'=>'a', 'î'=>'i', 'â'=>'a', 'ș'=>'s', 'ț'=>'t', 'Ă'=>'A', 'Î'=>'I', 'Â'=>'A', 'Ș'=>'S', 'Ț'=>'T',
'’'=>'', ' '=>'-', "'"=>"", '"'=>'', 'ª'=>'a', 'º'=>'o', '°'=>'o', '/'=>'', '«'=>'', '»'=>'', ','=>'',
'ê'=>'e', 'à'=>'a', 'é'=>'e', 'ô'=>'o', 'è'=>'e', 'à'=>'a', 'Ê'=>'E', 'À'=>'A', 'É'=>'E', 'O'=>'O', 'E'=>'E', 'A'=>'A',
'ã'=>'a',);

$arquivo='';

if (isset($_FILES['arquivo']['tmp_name'])) $arquivo = $_FILES['arquivo']['tmp_name'];
if (!empty($arquivo)){
$err=0;
$arquivo_name = strtr($_FILES['arquivo']['name'], $normalizeChars);
$arquivo_size = $_FILES['arquivo']['size'];
$arquivo_type = $_FILES['arquivo']['type'];

if ($arquivo_size > 10240000){
    $alert= "<font color=red>Votre archive ne peut pas dépasser 10 MBs</font>";
    $err++;
}

if ($err==0){
    $id_cliente='';
    if ($_SESSION['poder']==1){
        $id_cliente=$_POST['id_cliente_poder'];
        $quem_vai='3dplan';
    }
    else{
        $id_cliente=$_POST['id_cliente_poder'];
        if ($_POST['quem']=='c') $quem_vai='cotation';
        else $quem_vai='envoye';
    }

    $caminho="yourfoldergoeshere/$id_cliente/$quem_vai";
    if (!file_exists($caminho)){
        if (!mkdir($caminho, 0755, true)){
            $error = error_get_last();
            echo $error['message'];
        }}

    $caminho=$caminho.'/'.$arquivo_name;

    /* Defina aqui o tipo de arquivo suportado */
    $ext = pathinfo($arquivo_name, PATHINFO_EXTENSION);
    $allowed =  array('xlsx', 'xls', 'doc', 'docx', 'pdf', 'png', 'jpg', 'gif', 'jpeg', 'ai', 'cdr', 'zip', 'rar', 'gzip', 'XLSX', 'XLS', 'DOC', 'DOCX', 'PDF', 'PNG', 'JPG', 'GIF', 'JPEG', 'AI', 'CDR', 'ZIP', 'RAR', 'GZIP');
    if (in_array($ext,$allowed)){
        move_uploaded_file($arquivo,$caminho);
        $alert = "&#x263a; Archive téléchargé avec succès! <br/>";
    }
    else $alert= "<font color=red>Extension de archive invalide</font><br/>";}} else $alert= "S'il vous plaît poster un archive";
echo "<br/><br/>".$alert."<br/><br/><br/><br/>";

    $validated = $request->validate([
        'file' => 'required',
    ]);