Как мы можем подтвердить пароль как CSS

Question

Как отобразить значок "действительный", если текст поля "comfirm password" идентичен тексту "password"? Симиллар на имя и поля электронной почты в примере. Вот код CSS для подтверждения электронной почты и имя:

input[type=text]:required:valid,[type=email]:required:valid,textarea:required:valid{
background:url(valid.png) 90% center no-repeat #FFF ; 
}

Пример: http://data.imagup.com/10/1160658139.JPG

Answer 1

CSS не является языком программирования.

Вы должны проверить свои поля на стороне сервера или даже на стороне клиента с Javascript.

С текущей реализацией HTML5 в современном браузере вы можете проверить значение входных данных. Но, насколько я знаю, вы не можете проверить одно и то же значение только с чистым CSS.

<input type="password" id="pass" name="pass" required pattern="[A-Z]{3}[0-9]{4}"
     title="Password numbers consist of 3 uppercase letters followed by 4 digits."/>

Взгляните на API проверки ограничений

Вот пример того, как вы можете проверить электронную почту на сходство, используя API, упомянутый выше.

<label>Email:</label>
<input type="email" id="email_addr" name="email_addr">

<label>Repeat Email Address:</label>
<input type="email" id="email_addr_repeat" name="email_addr_repeat" oninput="check(this)">

<script>
    function check(input) {
        if (input.value != document.getElementById('email_addr').value) {
            input.setCustomValidity('The two email addresses must match.');
        } else {
            // input is valid -- reset the error message
            input.setCustomValidity('');
        }
    }
</script>