php - Can't validate AJAX form

Question

I'm trying to make a form with plenty of input fields and with dropzone.js. I have required and non-required inputs. If I fill all the required ones and upload atleast 1 image, everything works fine. All the data goes into my database and I'm able to redirect the user wherever I want. The problem starts when I don't fill a required input or I don't upload any image. I can't display any error messages and for some reason If I click the submit button with a missing required input and then fill it, I can't click it again, because nothing happens. I've been struggling with this for days and I have no idea how to:

1. display the error messages
2. Be able to submit the form for the second time if I correct the missing input fields. This is the form:

<form action="upload.php" method="post" enctype='multipart/form-data' id="add">
<div class="dropzone" id="uploader"></div>
<input type="text" id="mainimage" name="mainimage">
<input class="form-control" id="model" type="text" placeholder="Modell" name="model" required>
<!-- And a lot of input/select field -->
</form>

The AJAX:

Dropzone.options.uploader = {
url: 'upload.php',
autoProcessQueue: false,
uploadMultiple: true,
paramName: "images", // The name that will be used to transfer the file
maxFilesize: 2, // MB
maxFiles: 5,
addRemoveLinks: true,
acceptedFiles: 'image/*',
accept: function(file, done) {
    let fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.onloadend = function() {
        $('<a>', {
            class: 'primary',
            text: "Legyen ez a f? kép",
            href: "#"
        }).appendTo(file.previewElement)
        //file.previewElement.append($textContainer)
        console.log(file.previewElement)
        file.previewElement.classList.add("dz-success");
        if (($(".dz-success.dz-complete").length > 0) && ($(".main").length == 0)) {
            $(".dz-success.dz-complete:first .primary").text("F? kép")
            //add class to first one
            $(".dz-success.dz-complete:first").addClass("main")
            $("#mainimage").val($(".dz-success.dz-complete:first").find(".dz-filename span").text()) //add default name to imgs input
        }
    }
    file.previewElement.classList.add("dz-complete");
    done();
},
error: function(file, message, xhr) {
    if (xhr == null) this.removeFile(file);
    alert(message);
},
removedfile: function(file) {
    var is_there = file.previewElement.classList.contains("main");
    console.log(is_there)
    file.previewElement.remove();

    if (is_there && $(".dz-success.dz-complete").length > 0) {
        $(".dz-success.dz-complete .primary").text("Legyen ez a f? kép")
        $(".dz-success.dz-complete:first .primary").text("F? kép")
        $(".dz-success.dz-complete:first").addClass("main")
        $("#mainimage").val($(".dz-success.dz-complete:first").find(".dz-filename span").text()) //add default name to imgs input
    }
    if ($(".dz-success.dz-complete").length == 0) {

        $("#mainimage").val("")
    }

},
success: function(file, response) {
    return window.location.replace('hirdeteseim.php');
},
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("sendButton").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) {
        $(":input[name]", $("form")).each(function() {
            formData.append(this.name, $(':input[name=' + this.name + ']', $("form")).val());
        });
    });
}

};

and a part of the upload.php file:

if (isset($_POST['model']) && $_POST['model'] != '') {
    $model = $_POST['model'];
} else {
    $errorMsg[] = "Please select the model!";
    $ok = false;
}
.
.
.
echo json_encode(
    array(
        'ok' => $ok,
        'errorMsg' => $errorMsg
    )
);

question from:https://stackoverflow.com/questions/65933390/cant-validate-ajax-form

Answer 1

Waitting for answers