jQuery validate срабатывает не всегда
Совершенно точно косяк где-то в скрипте, но я не понимаю где. js знаю по стольку поскольку.
Ситуация:
1. Есть статическая форма, в которой в параметре onclick="" вызывается некоторая функция (onclick="addButton()");
2. Внутри функции используется метод .validate() библиотеки jQuery Validation Plugin;
(код см. ниже)
2.1. Проверка поля формы проводится по 2 кретериям: соответствие некоторому регулярному выражению и уникальность имени сущности в БД.
2.2. В случае удачи, submitHandler() выполняет сохранение объекта в БД.
3. При запуске проекта в БД записывается один тестовый объект (допустим, с именем ABC).
Проблема: по какой-то причине, если создать новый объект в БД через проверяемую форму, например, DEF, а, затем попытаться создать еще один объект с таким же именем (DEF), то программа попытается создать этот объект в обход проверки (remote: request), и вылетит эксепшн. НО! Если после запуска приложения попытаться СПЕРВА создать объект ABC, то валидатор отработает и будет срабатывать каждый раз (ниже приведу STR и код для лучшего понимания)
Pre-condition:
1. В БД УЖЕ есть объект с именем ABC
STR (валидатор отработает)
1. Открыть вкладку с формой;
2. Ввести имя ABC;
3. Сохранить объект (кнопка).
ФР: Валидатор отработал, в логах контроллера есть событие с обращением по указанному дял проверки url, выведено сообщение об ошибке, форма заблокирована, отправить ее невозможно.
STR (валидатор не отработает)
1. Открыть вкладку с формой;
2. Ввести имя DEF;
3. Сохранить объект (кнопка);
4. Повторить 1-3 снова.
ФР: Валидатор НЕ отработал, в логах контроллера НЕТ события с обращением по указанному дял проверки url, форма отправлена, отработало исключение.
Подскажите, почему такое происходит?
Методы контроллера:
@GetMapping(value = "/is_free")
public boolean isTypeNameFree(@RequestParam("name") String name,
@RequestParam(value = "id", required = false) Long id) {
System.out.printf("\n\nAuthor [id: %s | name: %s]\n\n", id, name);
Author author = authorService.getByName(name);
System.out.println(author + "\n\n");
return author == null || author.getId().equals(id);
}
@PostMapping(value = "/add_author")
public void addAuthor(@RequestBody AuthorDto newAuthor) {
String name = newAuthor.getName();
String editName = name.replaceAll("[^A-Za-zА-Яа-я0-9 ]", "");
if (authorService.getByName(editName) == null) {
Author author = new Author();
author.setName(editName);
author.setAuthorGenres(getGenres(newAuthor.getGenres()));
authorService.addAuthor(author);
}
}
скрипт js
function addButton() {
let form = $("#addForm");
let name = $("#addAuthorName");
let genre = $("#addAuthorGenre");
form.validate({
rules: {
name: {
required: true,
pattern: authorNameRegEx,
remote: {
method: "GET",
url: "/api/admin/author/is_free",
cache: false,
dataType: "JSON",
parameterData: {
name: () => {
return name.val();
}
}
}
}
},
messages: {
name: errMessages
},
submitHandler: () => {
$.ajax({
method: "POST",
url: "/api/admin/author/add_author",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({
name: name.val(),
genres: genre.val()
}),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
cache: false,
complete: () => {
form.trigger('reset');
getTable();
$('#tab-author-panel').tab('show');
},
success: () => {
notification(
"add-author" + name.val(),
` Автор ${name.val()} добавлен`,
"authors-panel");
},
error: (xhr, status, error) => {
alert(xhr.responseText + '|\n' + status + '|\n' + error);
}
})
}
})
}
описание формы (html)
<form id="addForm">
<div class="form-group text-center edit-form">
<div>
<label for="addAuthorName">Исполнитель</label>
<input id="addAuthorName" class="form-control"
type="text"
placeholder="Введите имя автора"
name="name"/>
</div>
<div>
<label for="addAuthorGenre">Жанр</label>
<select class="form-control"
id="addAuthorGenre"
name="addGenre">
<!--заполняем через js-->
</select>
</div>
<button id="addAuthorBtn" class="btn btn-success btn-lg"
type="submit" style="margin-top: 20px;"
onclick="addButton()">
Добавить исполнителя
</button>
</div>
</form>