CODEWITHSUNDEEP
javascriptjqueryhtmlfile-uploaddropzone.js
doflamingo
doflamingo

Reputation: 567

Dropzone.js combine with other form - html5 required validation

Hello I use dropzone and combine it with other form. The problem is e.preventDefault(); that make my html5 validation attribute (required) lost. but If I did not have 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>

Upvotes: 0

Views: 1782

Answers (1)

wallek876
wallek876

Reputation: 3259

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.

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

}

Upvotes: 2

Related Questions