Я не очень квалифицирован, когда дело доходит до внешнего интерфейса, поэтому, возможно, я упускаю из виду кое-что очевидное здесь.У меня есть форма ввода, и при нажатии кнопки отправить код ниже отправляет данные в бэкэнд Java, который пытается сохранить эти данные.Если это удается, он отвечает 200, если что-то не так с данными, он отвечает 400. Я попытался добавить оповещения, которые сообщают пользователю, если это удалось или нет.Они работают, если я не пытаюсь проверить ввод перед отправкой:
function saveEntry() {
var form = document.getElementById("catalogEntry"); // apparently this line breaks all alerts within the ajax call
if (form.checkValidity() === false) {
form.classList.add("was-validated");
return;
}
var formData = new FormData();
// *Appending form data*
$.ajax({
type: "POST",
url: "/addCatalogEntry/",
data: formData,
processData: false,
contentType: false,
cache: false,
timeout: 600000,
statusCode: {
200: function (response) {
alert("Entry saved");
},
400: function (response) {
alert("Could not save entry");
}
}
});
}
Если я удаляю первые 5 строк в функции, отображаются предупреждения, но затем проверка ввода не выполняется.Как только я добавляю строку, где я инициализирую, переменные формы оповещения перестают отображаться.Мне удалось снова их вызвать, добавив еще одно бессмысленное оповещение после вызова AJAX.Я действительно не понимаю, почему это происходит ...
Если важно, моя форма выглядит в основном так:
<form id="catalogEntry">
<div class="input-group mb-2">
<span class="input-group-addon col-sm-2">catalogId</span>
<input id="catalogId" type="text" class="form-control" required>
</div>
<div class="input-group mb-2">
<span class="input-group-addon col-sm-2">blockType</span>
<select id="blockType" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<button type="submit" class="btn btn-default" onclick="saveEntry()">Save</button>
</form>