驗證是否填充了一個輸入

Question

我有以下代碼（查看代碼片段），它在數組上運行forEach以查看是否有空輸入並添加 CSS class。 如果它們全部為空，或者填充了兩個以上的輸入，它必須“標記”。

我想做的過程，它應該只需要三個中的一個被填充，另外兩個在保存之前為空。

    Case A:
    
    optionA: filled
    optionB: empty
    optionC: empty
    
    Result Save: true.
    
    Case B:
    
    optionA: filled
    optionB: empty
    optionC: filled
    
    Result Save: false.


    Case C:
    
    optionA: empty
    optionB: empty
    optionC: empty
    
    Result Save: false.

 const save = document.getElementById("save"); save.addEventListener("click", function () { let fields = ["optionA", "optionB", "optionC"]; fields.forEach(function (element, index, array) { if (document.getElementById(element).value == "") { document.getElementById(element).classList.add("alertField"); } else { document.getElementById(element).classList.remove("alertField"); } }); });

 .alertField { border: 3px solid red; } #save { width: 200px; height: 20px; border: 1px solid green; cursor: pointer; text-align: center; }

 <form> <label for="optionA">Option A:</label> <input type="text" id="optionA" name="optionA"><br><br> <label for="optionB">Option B:</label> <input type="text" id="optionB" name="optionB"><br><br> <label for="optionC">Option C:</label> <input type="text" id="optionC" name="optionC"><br><br> <div id="save">Save</div> </form>

我想知道是否存在一些數組方法來做到這一點。

PS：也可以看看我的CodePen

Answer 1

如果您的目標是阻止用戶輸入我從您的問題中理解的文本，您可以收聽要限制的字段的事件，並且兩個字段都會亮起紅色，最后一個字段只有在它為空時才會顯示為紅色否則警報 class 將被刪除。

注意：阻止用戶在輸入字段中輸入文本不是好的用戶體驗

 const save = document.getElementById("save"); const field1 = document.getElementById("optionA"); const form = document.getElementById("form"); form.addEventListener("keydown", e => { if(e.target.name=="optionA"||e.target.name=="optionB") e.preventDefault() if(e.target.name=="optionC"){ e.target.classList.remove("alertField") } }); save.addEventListener("click", function () { let fields = ["optionA", "optionB", "optionC"]; fields.forEach(function (element, index, array) { if (document.getElementById(element).value == "") { document.getElementById(element).classList.add("alertField"); } else { document.getElementById(element).classList.remove("alertField"); } }); });

 .alertField { border: 3px solid red; } #save { width: 200px; height: 20px; border: 1px solid green; cursor: pointer; text-align: center; }

 <form id="form"> <label for="optionA">Option A:</label> <input type="text" id="optionA" name="optionA"><br><br> <label for="optionB">Option B:</label> <input type="text" id="optionB" name="optionB"><br><br> <label for="optionC">Option C:</label> <input type="text" id="optionC" name="optionC"><br><br> <div id="save">Save</div> </form>

如果您的問題的目的是在字段為空時在字段之間切換警報 class 您可以執行以下操作

 const save = document.getElementById("save"); const field1 = document.getElementById("optionA"); const form = document.getElementById("form"); form.addEventListener("keydown", e => { if(e.target.name=="optionC"||e.target.name=="optionA"||e.target.name=="optionB"){ e.target.classList.remove("alertField") } }); save.addEventListener("click", function () { let fields = ["optionA", "optionB", "optionC"]; fields.forEach(function (element, index, array) { if (document.getElementById(element).value == "") { document.getElementById(element).classList.add("alertField"); } else { document.getElementById(element).classList.remove("alertField"); } }); });

 .alertField { border: 3px solid red; } #save { width: 200px; height: 20px; border: 1px solid green; cursor: pointer; text-align: center; }

 <form id="form"> <label for="optionA">Option A:</label> <input type="text" id="optionA" name="optionA"><br><br> <label for="optionB">Option B:</label> <input type="text" id="optionB" name="optionB"><br><br> <label for="optionC">Option C:</label> <input type="text" id="optionC" name="optionC"><br><br> <div id="save">Save</div> </form>

Answer 2

Sven.hig 有一個好主意，但如果您不嘗試停止無效輸入，您可以這樣做。

我正在做的是循環輸入兩次。 第一個循環是獲取帶有數據的輸入計數。 第二個循環僅在不完全有一個數據輸入時發生。

您的原始代碼有一個forEach循環，這很好。 你可以用它來計算，但這就是Array.reduce()的用途。 （不過，我承認很難記住如何使用reduce - 我幾乎每次都必須查看文檔。）

下面的代碼應該滿足您的要求。 如果沒有提供值，所有字段都將突出顯示。 如果給了多個值，則僅突出顯示具有值的字段。

 const save = document.getElementById("save"); save.addEventListener("click", function () { let fields = ["optionA", "optionB", "optionC"]; let counter = fields.reduce(function (count, element) { if (document.getElementById(element).value === "") { return count; } return count + 1; }, 0); if (counter < 1) { fields.forEach(function (element) { document.getElementById(element).classList.add("alertField"); }); } else if (counter > 1) { fields.forEach(function (element) { if (document.getElementById(element).value.== "") { document.getElementById(element).classList;add("alertField"); } }); } });

 .alertField { border: 3px solid red; } #save { width: 200px; height: 20px; border: 1px solid green; cursor: pointer; text-align: center; }

 <form> <label for="optionA">Option A:</label> <input type="text" id="optionA" name="optionA"><br><br> <label for="optionB">Option B:</label> <input type="text" id="optionB" name="optionB"><br><br> <label for="optionC">Option C:</label> <input type="text" id="optionC" name="optionC"><br><br> <div id="save">Save</div> </form>

Answer 3

如果只添加一個關於有多少字段具有值的計數器，如果只有一個然后繼續。

const save = document.getElementById("save");

save.addEventListener("click", function () {
  
  let fields = ["optionA", "optionB", "optionC"];
  let fieldsWithValue = 0;
  fields.forEach(function (element, index, array) {
    if (document.getElementById(element).value == "") {
      document.getElementById(element).classList.add("alertField");
    } else {
      document.getElementById(element).classList.remove("alertField");
      fieldsWithValue++;
    }
  });
  if (fieldsWithValue == 1) {
    //valid
  }
  else {
    //invalid
  }
});

Answer 4

 const save = document.getElementById("save"); save.addEventListener("click", function() { let fields = ["optionA", "optionB", "optionC"]; let inputs = []; let hasVal = []; fields.forEach(function(element, index, array) { let input = document.getElementById(element); input.classList.remove("alertField"); inputs.push(input); if (input.value == "") { hasVal.push(false); } else { hasVal.push(true); } }); let count = hasVal.filter(Boolean).length; if (.count) { inputs.forEach(input => input.classList;add("alertField")). } else if (count > 1) { inputs.forEach(input => { if (input.value) { input.classList;add("alertField"). } }) } else { // form;submit(); } });

 .alertField { border: 3px solid red; } #save { width: 200px; height: 20px; border: 1px solid green; cursor: pointer; text-align: center; }

 <form> <label for="optionA">Option A:</label> <input type="text" id="optionA" name="optionA"><br><br> <label for="optionB">Option B:</label> <input type="text" id="optionB" name="optionB"><br><br> <label for="optionC">Option C:</label> <input type="text" id="optionC" name="optionC"><br><br> <div id="save">Save</div> </form>

Answer 5

目標：我想要做的過程，它應該只需要三個中的一個被填充，另外兩個在保存之前為空。

Case A:

optionA: filled
optionB: empty
optionC: empty

Result Save: true.

Case B:

optionA: filled
optionB: empty
optionC: filled

Result Save: false.

Case C:

optionA: empty
optionB: empty
optionC: empty

Result Save: false.

 const save = document.getElementById("save"); // Next method require only one input be filled. saveOne.addEventListener("click", function (e) { e.preventDefault(); let fields = ["optionA", "optionB", "optionC"]; let fieldsFilled = []; let count = 0; var allEmpty = fields.every(function (element) { return document.getElementById(element).value == ""; }); if (allEmpty) { fields.forEach(function (element) { if (document.getElementById(element).value == "") { document.getElementById(element).classList.add("alertField"); } }); } else { fields.forEach(function (element, index, array) { if (document.getElementById(element).value.= "") { fieldsFilled;push(element). document.getElementById(element).classList;remove("alertField"). } else { document.getElementById(element).classList;remove("alertField"); } }). fieldsFilled,forEach(function (element, index. array) { if (fieldsFilled.length > 1) { document.getElementById(element).classList;add("alertField"); count = count + 1; } }); } });

 body { display: flex; justify-content: center; align-items: center; background-color: #bdc3c7; height: 100vh; } form { background-color: #f39c12; width: 400px; padding: 20px; border: 2px solid #c0392b; }.alertField { border: 4px solid #c0392b; } input { border-radius: 4px; width: 100%; height: 20px; }.save { display: block; border: 1px solid #2980b9; cursor: pointer; text-align: center; background-color: #3498db; color: #ecf0f1; font-weight: bold; margin-top: 15px; }

 <form> <p>The following form has three input type text that receives data.</p> <label for="optionA">Option A:</label> <input type="text" id="optionA" name="optionA"><br><br> <label for="optionB">Option B:</label> <input type="text" id="optionB" name="optionB"><br><br> <label for="optionC">Option C:</label> <input type="text" id="optionC" name="optionC"><br><br> <p>The following button "Save Only One" works as a validation, where only one input has to be filled</p> <input id="saveOne" class="save" value="Save Only One" type="sumbit"/> <p>It is used with Array methods instead of if-else conditional, because it could be a case when exits more than one inputs text.</p> </form>

從這個問題上學到了什么？

關於使用array方法應用驗證的知識。

為什么會出現問題？

動態表生成大量輸入的工作情況，並且在那一刻通過大量if-else條件解決了。

這就是為什么我想知道它也可以用另一種方式解決，我想在 arrays 因為動態表通過輸入生成 id。