Dropzone.js與其他形式結合使用-html5必需的驗證

Question

您好，我使用dropzone並將其與其他形式結合使用。 問題是e.preventDefault(); 使我的html5驗證屬性（ required ）丟失。 但是如果我沒有e.preventDefault(); 它將提交其他表格而不上傳我的文件。 我該怎么辦？

這是我的完整代碼

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

當您使用dropzone.processqueue()提交表單時，dropzone不知道需要輸入，我認為最簡單的方法是使用javascript手動驗證您在具有相同事件偵聽器中的輸入值提交按鈕，然后再處理隊列。

例如：

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