CODEWITHSUNDEEP
javascripthtml
tx-911
tx-911

Reputation: 447

JavaScript text form validation from another field being updated by same form

I created below form: when you enter a name in first text box, it dynamically adds the names to another field below after pressing the + button. The function is implemented on the + button.

Now I want to add a validation logic within the same script, so that same name shouldn't be added twice. Please advise, only want to implement using javascript.

    function promptAdd(list){
    var text = "";
    var inputs = document.querySelectorAll("input[type=text]");
    for (var i = 0; i < inputs.length; i++) {
        text += inputs[i].value;
        }
    var li = document.createElement("li");
    var node = document.createTextNode(text);
    li.appendChild(node);
    document.getElementById("list").appendChild(li);

        }
<!doctype html>
<html>
<div class="row">
    <div class="col-lg-6 mb-1">
        <div class="card h-100 text-left">
            <div class="card-body">
                <h4 class="card-title">Add Resources</h4>
                <input type="text" class="form-control" name="employee" placeholder="Enter Name" />
                <small id="message" class="form-text text-muted">Press + to add to your list</small>
                <button id="bd1" class="btn add-more" onclick="promptAdd(list)" type="button">+</button>
                <br></br>
                <h5>List of Resources added</h5>
                <div class="form-control" id="list">
                    <span id="list">
                </div>
            </div>
        </div>
    </div>
</div>
</html>

Upvotes: 3

Views: 74

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

The validation could be implemented simply by looping through all the li's and comparing the text of every li with the value of the input and if the values matches just return false, like :

var lis = document.querySelectorAll('#list li');
for (var i = 0; i < lis.length; i++) {
  if (lis[i].innerText == text) {
    return false;
  }
}

Hope this helps.

function promptAdd(list) {
  var text = "";
  var inputs = document.querySelectorAll("input[type=text]");
  
  for (var i = 0; i < inputs.length; i++) {
    text += inputs[i].value;
  }
  
  var lis = document.querySelectorAll('#list li');
  for (var i = 0; i < lis.length; i++) {
    if (lis[i].innerText == text ){
      resetInputs();
      
      return false;
    }
  }
  
  var li = document.createElement("li");
  var node = document.createTextNode(text);
    
  li.appendChild(node);
  document.getElementById("list").appendChild(li);
  
  resetInputs();
}

function resetInputs(){
  var inputs = document.querySelectorAll("input[type=text]");
  
  for (var i = 0; i < inputs.length; i++) {
    inputs[i].value = "";
  }
}
<div class="row">
  <div class="col-lg-6 mb-1">
    <div class="card h-100 text-left">
      <div class="card-body">
        <h4 class="card-title">Add Resources</h4>
        <input type="text" class="form-control" name="employee" placeholder="Enter Name" />
        <small id="message" class="form-text text-muted">Press + to add to your list</small>
        <button id="bd1" class="btn add-more" onclick="promptAdd(list)" type="button">+</button>
        <br><br>
        <h5>List of Resources added</h5>
        <div class="form-control" id="list">
          <span id="list"></span>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 3

Nope
Nope

Reputation: 22339

Loop though all li elements and check their innerText with the new text. If you want to ignore capitalization you can use innerText.toUpperCase() === newText.toUpperCase()

function promptAdd(list) {
  var text = "";
  var inputs = document.querySelectorAll("input[type=text]");

  for (var i = 0; i < inputs.length; i++) {
    text += inputs[i].value;
  }

  if (textAlreadyExistsInList(text)) {
    return;
  };

  var li = document.createElement("li");
  var node = document.createTextNode(text);
  li.appendChild(node);
  document.getElementById("list").appendChild(li);
};

function textAlreadyExistsInList(text) {
  var itemExists = false;
  var items = document.getElementById("list").querySelectorAll('li');

  for (var i = 0; i < items.length; i++) {
    if (items[i].innerText === text) { //to ignore casing: items[i].innerText.toUpperCase() === text.toUpperCase()
      itemExists = true;
      break;
    }
  }

  return itemExists;
}
<div class="row">
  <div class="col-lg-6 mb-1">
    <div class="card h-100 text-left">
      <div class="card-body">
        <h4 class="card-title">Add Resources</h4>
        <input type="text" class="form-control" name="employee" placeholder="Enter Name" />
        <small id="message" class="form-text text-muted">Press + to add to your list</small>
        <button id="bd1" class="btn add-more" onclick="promptAdd(list)" type="button">+</button>
        <br></br>
        <h5>List of Resources added</h5>
        <div class="form-control" id="list">

        </div>

Upvotes: 1

Jack jdeoel
Jack jdeoel

Reputation: 4584

You need one input text so given that id is better . Here I set insert_name as id ! Get all li by querySelectAll and check text with innerHTML and input value .

function promptAdd(list){
    var inputs = document.getElementById("insert_name").value;
    if(checkDuplicate(inputs)) return; // check duplicate
    var li = document.createElement("li");
    var node = document.createTextNode(inputs);
    li.appendChild(node);
    document.getElementById("list").appendChild(li);
}
function checkDuplicate(name) {
    var flag = false;
    var lis = document.querySelectorAll("li");
    for(var i = 0 ;i < lis.length;i++) {
        if(name == lis[i].innerHTML) {
            flag = true;
            break;
        }
    }
    return flag;
}

Upvotes: 0

Related Questions