Matthew,
One of the problems with your code is that it will call the AJAX request regardless of whether the form is valid or not. The way things are, you only do the validation after sending the data to the server, which is not even a good thing to do. The code below addresses this problem, basing itself on your code.
function validarLivro() {
var nome = $("#nomelivro").val()
var descricao = $("#descricao").val()
var genero = $("#genero").val()
var autor = $("#autor").val()
var editora = $("#editora").val()
/* A função .val() do jQuery retornará undefined se o campo estiver vazio.
Podemos fazer assim então para verificar se todos os campos estão preenchidos */
if(nome && descricao && genero && autor && editora) {
// Se todos os campos estiverem preenchidos, passamos um objeto livro para o cadastro
return {
op: "cadastra",
nomelivro: nome,
descricao: descricao,
genero: genero,
autor: autor,
editora: editora
}
} else {
return false
}
}
function cadastrarLivro() {
const livro = validarLivro()
if(livro) {
// Código para chamar a requisição e salvar o livro
$.ajax({
type: 'POST',
datatype: 'json',
url: api,
data: livro
})
// Vai ser chamado caso tudo ocorra normalmente
.done(function (msg) {
cadastrado=JSON.parse(msg);
$("#CadLivros").addClass("hide");
$("#telaPrincipal").removeClass("hide");
})
// Vai ser chamado em caso de erro no servidor
.fail(function () {
alert("Um erro ocorreu!")
})
} else {
// Caso o livro não tenha passado na validação trate o erro aqui
M.toast({html: 'Um dos campos está vazio!'});
}
}
Now just call cadastrarLivro() and everything should work normally.
Embrace
Q.: Another problem with your code that I had the freedom to fix, this is more a matter of reading is the fact that you, the presence of a CodeSmell in the nomenclature of the function. It has the name validateCadastro but at the same time it does this and also makes the request on the server. Separating the code avoids this problem;)
