Скрыть символ выходной метки валидации (✘) скрыть, когда страница загружена/перезагружена.

Question

Я использую следующий код с шаблоном соответствия HTML5 в поле ввода и псевдоселекторами CSS3 :invalid и , чтобы отобразить результат проверки (действительный значение или нет) в 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 без каких-либо различий в функциональности.