4
respostas

Há algo de errado com a validação do formulário com if epProgress < epTotal

Mesmo com os dados errados or formulário submete as informações a tabela e notifica a linha acima como errada, mesmo não sendo o caso.

/* ((( Usando o botão ))) */

/* 1- Utilizando o botão e classificando-o para ser "ouvido" */

var buttonAdd = document.querySelector("#adicionar-paciente");

// console.log(buttonAdd); - com isso comfirmamos no console e está funcionando

/* 2- Adicionando um escutador de evento para o click */
buttonAdd.addEventListener("click", function(event){

    event.preventDefault(); //essa função event.preventDefault(); previne os comportamentos usuais do navegador

    // ((( Adicionando um novo item a tabela )))

    var form = document.querySelector("#new-item-form");

    var item = obtainItemFromForm(form);

    /** Adicionando o item na tabela */
    var itemTr = settingUpTr(item);

    var fails = itemValidation(item);


    if (fails.length > 0) {
        console.log(fails);
        displayErrorMessage(fails);
        return;
    }
    var tableAnime = document.querySelector("#anime-cw");
    tableAnime.appendChild(itemTr);


    form.reset();
});

function displayErrorMessage(fails) {
    var ul = document.querySelector("#messages-fail");
    fails.forEach(function(fail) {
        var li = document.createElement("li");
        li.textContent = fail;
        ul.appendChild(li);
    });
}

function obtainItemFromForm(form){

    var item = {
        title: form.title.value,
        status: form.status.value,
        score: form.score.value,
        progress: form.progress.value,
        episode: form.episode.value,
        difference:calcEps(form.progress.value, form.episode.value),
        type: form.type.value
    }

    return item;

    //aqui temos um objeto que contem todas as propriedades/caracteristicas do item
}

function settingUpTr(item) {

    var itemTr = document.createElement("tr");
    itemTr.classList.add("item-cw");

    itemTr.appendChild(settingUpTd(item.title, "anime-title"));
    itemTr.appendChild(settingUpTd(item.status, "anime-status"));
    itemTr.appendChild(settingUpTd(item.score, "anime-score"));
    itemTr.appendChild(settingUpTd(item.progress, "ep-progress"));
    itemTr.appendChild(settingUpTd(item.episode, "ep-total"));
    itemTr.appendChild(settingUpTd(item.difference, "ep-to-complete"));
    itemTr.appendChild(settingUpTd(item.type, "anime-type"));

    return itemTr;
}

function settingUpTd(dataTd, classTd) {
    var td = document.createElement("td");
    td.textContent = dataTd;
    td.classList.add(classTd);

    return td;
}

function itemValidation(item){

    var validCheckError = [];

    if (!progressValidationEp(item.progress)) {
        validCheckError.push("Progress input bigger than Total of Episodes.")
    }

    if(!validProgress(item.progress))
        validCheckError.push("Progress input is invalid");

    if (!validEpisode(item.episode)) 
        validCheckError.push("Total Episode input is invalid");



    return validCheckError;
}
4 respostas

O código está dividido em duas partes, abaixo est´a segunda.

var currentlyWatching = document.querySelectorAll(".item-cw");

/* Incrementando para todos os pacientes */

for (var i = 0; i < currentlyWatching.length ; i++){

    var watching = currentlyWatching[i];

    var itemEpProgress = watching.querySelector(".ep-progress");
    var epProgress = itemEpProgress.textContent;

    var itemEpTotal = watching.querySelector(".ep-total");
    var epTotal = itemEpTotal.textContent;

    var itemEpDifference = watching.querySelector(".ep-to-complete");

    /* Validação com variáveis */
    var itemDifferenceValid = calcEps(epProgress,epTotal);
    var itemProgressValidation = true;
    var itemProgressValid = validProgress(epProgress);
    var itemEpisodeValid = validEpisode(epTotal);

    /* Verificação if */
    if (!itemProgressValidation) {

        itemDifferenceValid = false;
        itemEpProgress.textContent = "Number invalid";
        itemEpDifference.textContent = "Result invalid";
        watching.classList.add("wrong-resultt");
    }

    if (!itemProgressValid) {

        itemDifferenceValid = false;
        itemEpProgress.textContent = "Number invalid";
        itemEpDifference.textContent = "Result invalid";
        watching.classList.add("wrong-result");
    }

    if ( !itemEpisodeValid) {

        itemDifferenceValid = false;
        itemEpTotal.textContent = "Number invalid";
        itemEpDifference.textContent = "Result invalid";
        watching.classList.add("wrong-resulto");
    }


    if (itemDifferenceValid){

    var epDifference = calcEps(epProgress,epTotal);
    itemEpDifference.textContent = epDifference;

    }
}

function validProgress(epProgress) {
    if (epProgress >= 0) {
        return true;
    } else{
        return false
    }
}

function progressValidationEp(epProgress, epTotal){
    if ( epTotal > epProgress) {
        return true;
    } else {
        return false;
    }
}

function validEpisode(epTotal) {
    if (epTotal > 0) {
        return true;
    } else {
        return false;
    }
}

function calcEps(epProgress,epTotal){
    var epDifference = 0;

    epDifference = epTotal - epProgress;

    if (epDifference < 0) {

        itemDifferenceValid = false;
        itemEpProgress.textContent = "Number invalid";
        epDifference = "Result invalid";
        watching.classList.add("wrong-resultp");
    }

    return epDifference;
}

Oi, Amanda, tudo bem?

Você poderia disponibilizar o seu projeto completo via github ou google drive para que possa testar junto do html e entender melhor o que aconteceu.

Olá, Laís!

Aqui está o link para o Google Drive https://drive.google.com/drive/folders/1HdoXIgywSaqwONH9jiErCIdf0Stavm4B?usp=sharing

Lamento ter demorado de enviar, mas não tinha recebido notificação de sua resposta.

Olá, Laís!

Consegui corrigi um dos erros que não permintia uma das validações da tabela funcionarem. Mas, a questão principal persiste.