加载/重新加载页面时隐藏验证输出标记（✘）符号隐藏

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. 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?

我使用下面的代码与输入框上的HTML5模式匹配和CSS3:invalid和:valid伪选择器在输入框旁边的div.input-validation中显示验证的输出(有效值与否) 。这按预期工作,但它在页面加载本身和重新加载页面时显示验证标记(✘ - 无效输入)。我该怎样避免这个?

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>

1 个解决方案

#1

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:隐藏包含页面加载符号的范围,并仅在输入文本框中发生某些按键事件时显示。

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:根据某个类(比如访问过的)的存在定义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:

I have replaced the ~ in your CSS selectors with + because ~ selects all siblings which match the selector whereas the + selects only the adjacent sibling. 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.

我用CSS替换了CSS选择器中的〜,因为〜选择与选择器匹配的所有兄弟,而+只选择相邻的兄弟。只要在第一个输入框中输入值,使用〜将使所有输入框旁边的范围显示(当表单中有多个输入框时)。

I have also modified the .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本身而不会有任何功能上的差别。

#1