當頁面被加載/重載時隱藏驗證輸出標記（✘）符號隱藏

Question

我在輸入框和CSS3 :invalid和:valid僞選擇器上使用下面的代碼和HTML5模式匹​​配來顯示驗證的輸出（有效值是否在輸入框旁邊的div.input-validation中）。這可以按預期工作，但它會在頁面加載和重新加載頁面期間顯示驗證標記（✘ - 無效輸入）。我應該如何避免這種情況？

代碼：

<style type="text/css"> 
    input { 
    font-size: 1em; 
    padding: .3em; 
    border-radius: 3px; 
    margin: .2em; 
    } 
    input[type="text"]:valid { 
    color: green; 
    } 
    input[type="text"]:valid ~ .input-validation::before { 
    content: "\2714"; 
    color: green; 
    } 
    input[type="text"]:invalid ~ .input-validation::before { 
    content: "\2718"; 
    color: red; 
    } 
    .input-validation { 
    display: inline-block; 
    } 
</style> 
<?echo $passwordregister;?> 
<input name="pw" autocomplete="off" type="text" id="pw" pattern="[a-zA-Z0-9]{6,22}" autofocus required > 
<div class="input-validation"></div> 

Answer 1

可以使用隱藏無效值（✘）符號在頁面加載以下任一選項之一。

選項1：隱藏其中包含在頁面加載的符號span並顯示它只有當一些keypress事件已經發生在輸入文本框。

window.onload = function() { 
 
    var el = document.querySelectorAll("input[type='text']"); 
 
    for (var i = 0; i < el.length; i++) { 
 
    el[i].onkeypress = showSymbol; 
 
    } 
 

 
    function showSymbol() { 
 
    this.nextElementSibling.style.display = "inline-block"; // display the span next to the input in which key was pressed. 
 
    } 
 
}

input { 
 
    font-size: 1em; 
 
    padding: .3em; 
 
    border-radius: 3px; 
 
    margin: .2em; 
 
} 
 
input[type="text"]:valid { 
 
    color: green; 
 
} 
 
input[type="text"]:valid + .input-validation::before { 
 
    content: "\2714"; 
 
    color: green; 
 
} 
 
input[type="text"]:invalid + .input-validation::before { 
 
    content: "\2718"; 
 
    color: red; 
 
} 
 
.input-validation { 
 
    display: none; 
 
}

<input name="pw" autocomplete="off" type="text" id="pw" class="new" pattern="[a-zA-Z0-9]{6,22}" autofocus required/> <span class="input-validation"></span>

---

選項2：定義基於某些類的存在的CSS規則（比如visited）和分配此類僅當一些鍵在輸入框被按下。

window.onload = function() { 
 
    var el = document.querySelectorAll("input[type='text']"); 
 
    for (var i = 0; i < el.length; i++) { 
 
    el[i].onkeypress = showSymbol; 
 
    } 
 

 
    function showSymbol() { 
 
    this.classList.add("visited"); // add the visited class 
 
    } 
 
}

input { 
 
    font-size: 1em; 
 
    padding: .3em; 
 
    border-radius: 3px; 
 
    margin: .2em; 
 
} 
 
input[type="text"].visited:valid { 
 
    color: green; 
 
} 
 
input[type="text"].visited:valid + .input-validation::before { 
 
    content: "\2714"; 
 
    color: green; 
 
} 
 
input[type="text"].visited:invalid + .input-validation::before { 
 
    content: "\2718"; 
 
    color: red; 
 
} 
 
.input-validation { 
 
    display: inline-block; 
 
}

<input name="pw" autocomplete="off" type="text" id="pw" class="new" pattern="[a-zA-Z0-9]{6,22}" autofocus required/> <span class="input-validation"></span>

注：

• 我與+因爲~取代了你的CSS選擇器~選擇選擇器匹配所有的兄弟姐妹，而+只選擇相鄰兄弟。使用~將使所有輸入框旁邊的span顯示（當您在表單中有多個輸入框時），只要您在第一個輸入框中鍵入一個值。
• 我也修改了.input-validation從div到span但這更多的是個人喜好，你可以保留原來的div本身沒有任何功能上的差異。