CODEWITHSUNDEEP
htmlvalidationpassword-protection
horiaze
horiaze

Reputation: 21

how can we validate a password as css

How can I display the icon "valid", if the "comfirm password" field text is identic to "password" text? Simillar to the name and email fields in the example. Here is the css code for email verification and name:

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

Example: http://data.imagup.com/10/1160658139.JPG

Upvotes: 2

Views: 1796

Answers (1)

gearsdigital
gearsdigital

Reputation: 14205

CSS is not a programming language.

You have to validate your fields on server-side or even on client-side with Javascript.

With the current HTML5 implemation in modern browser you can check for the value of inputs. But as far as i know you can't check for the same value only with pure 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."/>

Take a look at The constraint validation api

Here is an example of how you can check emails for similarity using the api mentioned above.

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

Upvotes: 2

Related Questions