List validation with jQuery

Asked

Viewed 199 times

0

I am solving some exercises in javascript and I came across a situation that I can not solve.

I have a small "app" that creates a list of tasks, so far it works normally, I can add a new div within the main div. however, I need to check if the name already exists within this main div, below.;

var main = function(){
  $('button').click(function(){
    var tarefa = $('input[name=tarefa]').val();
    var conferir = $('.item').text();
		 if(tarefa==conferir){
       alert("Tarefa já foi adicionada!");
     }
  $('.lista-tarefa').append('<div class="item">' + tarefa + '</div>');
    $('input[name=tarefa]').val('');
  })
  $(document).on('click', '.item', function(){
    if (confirm("Deseja apagar?")){
    $(this).remove();
    }
  })
}

$(document).ready(main)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="painel">
  <label for="tarefa">Tarefa</label>
  <input type="text" name="tarefa" />
  <button id="btn">ADD</button>
</div>
<div class="lista-tarefa">
  
</div>

When I click the button to add a task, it informs that the task has actually been added but adds it again.

javascript jquery

  • Lacked a else after the if

  • The above example is comparing only the first task.

  • you could also put the rest of the code in an LSE{}.

2 answers

1

In this case below it only adds another task if it no longer exists

    var main = function(){
      $('button').click(function(){
        var tarefa = $('input[name=tarefa]').val();
        var conferir = $('.item').text();
        if(tarefa==conferir)
         {
           alert("Tarefa já foi adicionada!");
         }else
         {
           $('.lista-tarefa').append('<div class="item">' + tarefa + '</div>');
           $('input[name=tarefa]').val('');
         }
      })

      $(document).on('click', '.item', function(){
        if (confirm("Deseja apagar?")){
        $(this).remove();
        }
      })
    }

    $(document).ready(main)

1

I will redo your implementation using Javascript only.

In this case the best thing to do is to create an array to store successful tasks.

var button = document.querySelector("button");
var tarefa = document.querySelector("input[name=tarefa]");
var listaTarefa = document.querySelector(".lista-tarefa");
var tarefas = [];

var onFecharClick = function(){
  if (confirm("Deseja apagar?")){
    var indice = tarefas.indexOf(this.nextElementSibling.innerHTML);
    tarefas.splice(indice, 1);
    
    listaTarefa.removeChild(this.parentNode);
  }
}


button.onclick = function() {
  if (tarefas.indexOf(tarefa.value) >= 0) {
    alert("Tarefa já foi adicionada!");
    return;
  }  
  tarefas.push(tarefa.value);
  
  var texto = document.createElement("span");
  texto.innerHTML = tarefa.value;
  
  var fechar = document.createElement("a");  
  fechar.onclick = onFecharClick;
  fechar.innerHTML = '×';
  
  var novaTarefa = document.createElement("div"); 
  novaTarefa.classList.add("item");  
  novaTarefa.appendChild(fechar);
  novaTarefa.appendChild(texto);
  
  listaTarefa.appendChild(novaTarefa);  
}
.item { 
  box-shadow: 0px 0px 10px black; 
  margin: 5px 0px; 
  padding: 0px 5px;  
}

.item span {
  vertical-align: super;
}

.item a {
  color: #AAAAAA;
  cursor: pointer;
  font-size: 2.22222rem;
  font-weight: bold;
  line-height: 1;  
  margin-right: 5px;
}
<div class="painel">
  <label for="tarefa">Tarefa</label>
  <input type="text" name="tarefa" />
  <button id="btn">ADD</button>
</div>
<div class="lista-tarefa">
  
</div>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.