別のフィールドからのJavaScriptテキストフォームの検証が同じフォームで更新されています

以下のフォームを作成しました。最初のテキストボックスに名前を入力すると、+ボタンを押した後、別のフィールドに名前が動的に追加されます。この機能は+ボタンに実装されています。別のフィールドからのJavaScriptテキストフォームの検証が同じフォームで更新されています

今、同じスクリプト内に検証ロジックを追加したいので、同じ名前を2回追加しないでください。助言してください、ただ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>

出典

2017-10-19 Gurmehar Singh

を使用することができ、大文字を無視したい場合は、ES6へのアクセス権を持っているのですか？ Setsを使って簡単に行うことができます。そうでない場合は、 'indexOf'を使って値がすでに存在するかどうかを確認し、そうでない場合は挿入してください。あなたはすでにそこにあるもののリストを保持したり、毎回そのリストを解析しなければならないでしょう。 – maggiekh

あなたの最善の策は、アイテムの配列を維持することです。それで、アイテムがすでに存在するかどうかを調べるために、配列を見るのは非常に簡単です。 –

検証は、すべてのli年代をループしてinputの値を持つすべてのliのテキストを比較して、値が同じように、ちょうどfalseを返すと一致した場合、単純に実装することができ：

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

これが役に立ちます。

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>

出典

2017-10-19 15:54:47

ありがとうございます。それは働いた、別のQQ。また、.reset（）メソッドを使用して名前を追加した後、Enter nameフォームフィールドをリセットしようとしています。私はどこに追加すべきかアドバイスします。 –

うれしいことに、私は助けてくれました。あなたは代わりに '.value =" ";;'を使うことができました。 –

あなたはそのidが優れていることを与えられた一つの入力テキストを必要としています。ここで私はinsert_nameをidに設定しました！すべてのliをquerySelectAllで取得し、テキストにinnerHTMLと入力値をチェックしてください。

すべて li要素いえ

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; 
}

出典

2017-10-19 16:03:43

ループと新しいテキストで自分のinnerTextをご確認ください。あなたは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>

出典

2017-10-19 16:04:24 Nope

別のフィールドからのJavaScriptテキストフォームの検証が同じフォームで更新されています

答えて

関連する問題