HTML5 validation

Question

I wonder if HTML5 have any formvalidation for dual entry (write 2 identical password) and can you write own exceptions?

Thanx in advance!

Answer 1

If you want something a bit nicer and HTML5-utilising, try this: http://www.html5rocks.com/en/tutorials/forms/html5forms/

<label>Password:</label>
<input type="password" id="password" name="password">
<label>Confirm Password:</label>
<input type="password" id="passwordconf" name="passwordconf" oninput="check(this)">
<script language='javascript' type='text/javascript'>
function check(input) {
    if (input.value != document.getElementById('password').value) {
        input.setCustomValidity('The two passwords must match.');
    } else {
        // input is valid -- reset the error message
        input.setCustomValidity('');
   }
}
</script>

Make it fancy by adding this to your CSS (below). It puts a red border around the offending input fields when they fail HTML5 validation.

:invalid {
     border: 2px solid #ff0000;
}

All done. You should still use an alert() or server-side validation to ensure that the user inputs both passwords correctly. Don't rely on client-side anything.

Answer 2

I had a similar problem, and to solve it using the HTML5 api I did this: setted a pattern for the password to contain at least eight letters and a number. Then to make them matching I did:

    var password = document.querySelector('#password'),
        passwordConfirm = document.querySelector('#password_confirm');

    [].forEach.call([password, passwordConfirm], function(el) {
        el.addEventListener('input', function() {
            if (!el.validity.patternMismatch) {
                if ( password.value === passwordConfirm.value ) {
                    try{password.setCustomValidity('')}catch(e){}
                } else {
                    password.setCustomValidity("Password and password confirm doesn\'t match")
                }
            }
        }, false)
    });

where with el.validity.patternMismatch check for the pattern validity first and then check for the validity of the two. Here is my password input with the pattern.

<input type="password" pattern="^((?=.*(\d|\W))(?=.*[a-zA-Z]).{8,})$" id="password" />

Answer 3

I'm quite sure that's not possible. Also, it can be easily covered by javascript so why not use that instead?

This works perfectly well:

<script language="javascript"> 
function checkPassword() { 
    if (document.pwForm.pw1.value != document.pwForm.pw2.value) { 
        alert ('The passwords do not match!');
        return false; 
    } 
} 
</script>
<form action="filename.ext" name="pwForm" method="GET/POST">
    <input type="password" name="pw1" value=""><br />
    <input type="password" name="pw2" value=""><br />
    <input type="Submit" name="CheckPassword" value="Check Passwords" onClick="return checkPassword();">
</form>