I have created a javascript code that is supposed to validate a HTML form. During this validation there is supposed to be a popup (in case that something in the form is not correct).
This looks like this:
function validateDisks() {
var hiddenInput = document.getElementById('erasureHost');
if(hiddenInput.value == "") {
x0p({
title: "Host is required",
text: "Please choose a host from the host list.",
type: 'warning',
buttons: [{
type: 'warning',
text: 'Ok'
}]
}).then(function(data) {
return false;
});
}
var checkedBoxes = getCheckedBoxes("diskCheck");
if(checkedBoxes == null) {
return false;
} else if(checkedBoxes.length < 4) {
x0p({
title: "Few disks",
text: "You must select at least 4 disks for Erasure Coding",
type: 'warning',
buttons: [{
type: 'warning',
text: 'Ok'
}]
}).then(function(data) {
return false;
});
} [...]
My problem is that when the x0p function is ran the script does not wait for the .then and just continues it's validation. However when an error occures the User is supposed to be informed and afterwards the form is not supposed to be send, which can be achived be the return false.
I have already tried the following:
async function validateDisks() {
var hiddenInput = document.getElementById('erasureHost');
if(hiddenInput.value == "") {
var x = await x0p({
[...]
}).then(function(data) {
return false;
});
}
How can I make sure that the .then(function(data){ is actually executed and the script waits for the user to click the button in the popup?
EDIT:
I think it might be the problem that onsubmit="return validateDisks()" would not wait for the Promises. As I have tried to only validate the first Input (hiddenInput) and the form is send before I can click on my popup.
Maybe the solution is to not submit the form by action="diskChoice.php" but rather to submit the form via JavaScript like action="validateDisks() and send the form with jQuery.