List validation with Javascript

Question

I would like to validate a list using Javascript only. If the item is already in the list an alert should appear with the position of the item and if the item is not in the list should be included.

The current problem is that when executing the code Alert is running even the first time the item appears and if I try to inform a second time it still enters the list. see:

    <meta charset="utf-8"/>
<h1>Lista de casamento</h1>
Digite o nome do convidado: <br>
<input type="text"  id="campoConvidado">
<button onclick="listaConvidados();">Adicionar</button>
<hr><br>
<p  id="quantidadeConvidado">No momento sua lista está com [0] convidado(s)</p>

<script>
    var lista= [];
//criei uma única função para alinhar a lista no html e fazer as validações
    function listaConvidados()
    {
        var recebeNome= campoConvidado.value;
        lista.push(recebeNome);
        quantidadeConvidado.innerHTML= `No momento sua lista está com [${lista.length}] convidado(s)<br>
        <br> Nomes: <br> 
        <ol>
            <li>
                ${lista.join("</li><br><li>")}
            </li>
        </ol>`   
        if(recebeNome.trim()=="") //aqui quero que caso seja um campo em branco apareça o alerta a baixo.
        {
            alert("digite um nome para inserir na lista")
        }
        if (lista.includes(recebeNome) == false) // Inclui o novo item na lista
        {
        }
        else    
        {
            var posicao = lista.indexOf(recebeNome);
            alert("Nome informado já está na sua lista. Ele é o convidado de número [" + (posicao+1)+"]");
        }
    }
</script>

I’d appreciate it if someone would be so patient as to explain it to me.

Answer 1

The biggest problem is that you always enter the element in the list regardless of the situation:

function listaConvidados()
{
    var recebeNome= campoConvidado.value;
    lista.push(recebeNome);

Note that even if it already exists or if the name is empty, it will still add because it is the first thing to do. But you only want to add if it is valid, and so you have to test the two invalid cases (empty and already exist) before adding.

Interestingly, you already have the whole code for it only you’re in the wrong place.

Do it like this:

var lista= [];

function listaConvidados()
{
    var recebeNome= campoConvidado.value;
    
    if(recebeNome.trim() == "") //primeiro testa o primeiro caso de invalido
    {
        alert("digite um nome para inserir na lista")
    }
    else if (lista.includes(recebeNome)) //depois o segundo caso de invalido
    {
        alert("Nome informado já está na sua lista. Ele é o convidado de número [" + (lista.indexOf(recebeNome)+1)+"]");
    }
    else //se está tudo valido então adiciona e mostra o html apropriado
    {
        lista.push(recebeNome);
        quantidadeConvidado.innerHTML= `No momento sua lista está com [${lista.length}] convidado(s)<br>
        <br> Nomes: <br> 
        <ol>
            <li>
                ${lista.join("</li><br><li>")}
            </li>
        </ol>`               
    }
}

<h1>Lista de casamento</h1>
Digite o nome do convidado: <br>
<input type="text"  id="campoConvidado">
<button onclick="listaConvidados();">Adicionar</button>
<hr><br>
<p id="quantidadeConvidado">No momento sua lista está com [0] convidado(s)</p>

Note that in this my example the first two ifs that test invalid cases do not have the push and so the list is never modified.

Answer 2

1. You do not reference the element through the document.getElementById(), to then take the value of the field.
2. You enter the name in the list first and then check if the field is empty.
3. You double check if the element already exists in your array.

Your code should look like this

const lista = []

document.getElementById('inserirConvidado').onclick = function () {
    const recebeNome = document.getElementById('campoConvidado').value

  // caso seja um campo em branco apareça o alerta a baixo.
  if(recebeNome.trim() === ''){
    return alert('digite um nome para inserir na lista')
  }
  // caso o nome ja esteja na lista aparece o alerta com a posicao do nome na lista.
  if(lista.includes(recebeNome)){
    return alert(`Nome informado já está na sua lista. Ele é o convidado de número [${lista.indexOf(recebeNome) + 1}]`) 
  }

  lista.push(recebeNome)
  document.getElementById('quantidadeConvidado').innerHTML= `No momento sua lista está com [${lista.length}] convidado(s)<br>
        <br> Nomes: <br> 
        <ol>
            <li>
                ${lista.join("</li><br><li>")}
            </li>
        </ol>`
}

See that I check if the field is empty, and then if the guest is already in the list, then enter the name.