[英]Hide the validation output mark (✘) symbol hide when page is loaded/reloaded
I use the code below with HTML5 pattern matching on the input boxes and the CSS3 :invalid
and :valid
pseudo-selectors to display the output of the validation (valid value or not) in the div.input-validation
available next to the input box. 我使用下面的代码与输入框上的HTML5模式匹配和CSS3
:invalid
和:valid
伪选择器在输入框旁边的div.input-validation
显示验证的输出(有效值与否) 。 This works as expected but it displays the validation mark (✘ - invalid input) during page load itself and on re-loading the page. 这按预期工作,但它在页面加载本身和重新加载页面时显示验证标记(✘ - 无效输入)。 How should I avoid this?
我该怎样避免这个?
Code: 码:
<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>
You can hide the invalid value (✘) symbol on page load using either one of the following options. 您可以使用以下任一选项隐藏页面加载时的无效值(✘)符号。
Option 1: Hide the span
which contains the symbol on page load and display it only when some keypress
event has happened on the input text box. 选项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>
Option 2: Define the CSS rules based on the presence of certain class (say visited
) and assign this class only when some key is pressed in the input box. 选项2:根据某些类(比如
visited
)的存在定义CSS规则,并仅在输入框中按下某个键时分配此类。
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>
Note: 注意:
~
in your CSS selectors with +
because ~
selects all siblings which match the selector whereas the +
selects only the adjacent sibling. ~
在你的CSS选择器+
因为~
选择选择器而匹配所有的兄弟姐妹+
只选择相邻的兄弟。 Using ~
would make the span
next to all input boxes get displayed (when you have multiple input boxes in the form) as soon as you type a value in the first. ~
将使所有输入框旁边的span
显示(当表单中有多个输入框时)。 .input-validation
from div
to span
but that is more of a personal preference and you can just retain the original div
itself without any difference in functionality. div
到span
的.input-validation
,但这更像是个人偏好,你可以保留原来的div
本身而不会有任何功能上的差异。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.