Password Matching Validation

by Jeroen88

HTML

<form>
    <fieldset>
        <legend>Custom message</legend>
        <label for="password1">Password 1:</label>
        <input type="password" pattern=".{4,}" required id="password1" oninvalid="setCustomValidity('Password must be at least 4 characters')" onchange="try{setCustomValidity('')}catch(e){}" />
        <input type="submit" />
    </fieldset>
</form>

<form>
    <fieldset>
        <legend>Without custom message</legend>
        <label for="password2">Password 2:</label>
        <input type="password" pattern=".{4,}" required id="password2" />
        <input type="submit" />
    </fieldset>
</form>

CSS

form { padding: 20px; width: 300px; overflow: hidden; }
fieldset { padding: 10px; border: 1px solid black; margin-bottom: 5px; }
li { padding: 10px; }
input[type=submit] { float: right; margin-top: 10px; }