php - Can't validate AJAX form
one text
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:
- display the error messages
- 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
)
);
Source