Dropzone.js与其他形式结合使用-html5必需的验证

Question

Hello I use dropzone and combine it with other form. 您好，我使用dropzone并将其与其他形式结合使用。 The problem is e.preventDefault(); 问题是e.preventDefault(); that make my html5 validation attribute ( required ) lost. 使我的html5验证属性（ required ）丢失。 but If I did not have e.preventDefault(); 但是如果我没有e.preventDefault(); it will submit other form without upload my files. 它将提交其他表格而不上传我的文件。 How could I do? 我该怎么办？

Here is my full code 这是我的完整代码

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="dropzone.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="dropzone.js"></script>
    <script>
        Dropzone.options.myDropzone= {
    url: 'upload.php',
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 50,
    maxFiles: 50,
    maxFilesize: 1,
    acceptedFiles: 'image/*',
    addRemoveLinks: true,
    success: function(file, response){
        window.location = "http://www.google.com";

    },
    init: function() {
        dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

        // for Dropzone to process the queue (instead of default form behavior):
        document.getElementById("submit-all").addEventListener("click", function(e) {
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            dzClosure.processQueue();
        });

        //send all the form data along with the files:
        this.on("sendingmultiple", function(data, xhr, formData) {
            formData.append("firstname", $("#firstname").val());
            formData.append("lastname", $("#lastname").val());
        });
    }
}
    </script>
</head>
<body>
    <form action="upload.php" enctype="multipart/form-data" method="POST">
    <input type="text" id ="firstname" name ="firstname" required/>
    <input type="text" id ="lastname" name ="lastname" required/>

    <div class="dropzone" id="myDropzone"></div>
    <button type="submit" id="submit-all"> upload </button>
    </form>
</body>
</html>

Answer 1

When you submit the form using the dropzone.processqueue() , dropzone doesn't know that the inputs are required, I think the easiest approach would be to manually validate with javascript the values of the inputs inside the same event listener you have for the submit button, before processing the queue. 当您使用dropzone.processqueue()提交表单时，dropzone不知道需要输入，我认为最简单的方法是使用javascript手动验证您在具有相同事件侦听器中的输入值提交按钮，然后再处理队列。

An example of that can be: 例如：

init: function() {
    dzClosure = this; // Makes sure that 'this' is understood inside the functions below.

    document.getElementById("submit-all").addEventListener("click", function(e) {
        e.preventDefault();
        e.stopPropagation();

        var validFirstName = document.getElementById("firstname").checkValidity();
        var validLastName = document.getElementById("lastname").checkValidity();

        if (!validFirstName || !validLastName) {
            // Here you can handle the empty input case, color the inputs red or whatever
            return false;

        } else {
            dzClosure.processQueue();
        }
    });

}

Dropzone.js与其他形式结合使用-html5必需的验证

问题描述

1 个解决方案

解决方案1
2 2017-01-08 08:14:12

Dropzone.js与其他形式结合使用-html5必需的验证

问题描述

1 个解决方案

解决方案1 2 2017-01-08 08:14:12

解决方案1
2 2017-01-08 08:14:12