List validation with jQuery [closed]

Question

List validation with jQuery [closed]

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I'm solving some exercises in javascript and I came across a situation I can not solve.

I have a small "application" that creates a task list, so far it works normally, I can add a new div inside the main div. however, I need to check if the name already exists inside 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><divclass="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 already been added but adds it again.

javascript jquery

asked by anonymous 09.04.2015 / 14:33

2 answers

Using the dropbox as a NetBeans 8 project repository in Windows CSS, firefox does not recognize Bree Serif font

score 1 · Answer 1

In this case, it only adds another task if it does not already exist

    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)

score 1 · Answer 2

I'll redo your implementation using just JavaScript.

In case the best thing to do is to create an array to store the existing 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>