Edit in JSFiddle

<form>
    <table>
        <col />
        <col />
        <col />
        <col />
        <col />
        <caption>implementierte validierungsnachrichten in html5 browsern</caption>
        <thead>
            <tr>
                <td>Type/Browser</td>
                <th>Safari 5.02*</th>
                <th>Firefox 4Beta7</th>
                <th>Opera 10.63**</th>
                <th>your current browser</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>
                    type: text / value missing
                    <input required name="text-required" />
                </th>
                <td>Wert fehlt</td>
                <td>Bitte füllen Sie dieses Feld aus.</td>
                <td>Sie müssen einen Wert eingeben</td>
                <td></td>
            </tr>
            <tr>
                <th>
                    type: radio / value missing
                    <input required type="radio" name="radio-required" />
                </th>
                <td>Wert fehlt</td>
                <td>Bitte wählen Sie eine dieser Optionen.</td>
                <td>Sie müssen einen Wert eingeben</td>
                <td></td>
            </tr>
            <tr>
                <th>
                    type: text / pattern mismatch with title
                    <input title="${titletext}" pattern="foo" value="bar" name="text-pattern-title" />
                </th>
                <td>Muster stimmt nicht überein</td>
                <td>Bitte halten Sie sich an das vorgegebene Format: ${titletext}.</td>
                <td>${wert} hat für diese Seite einen falsches Format! ${titletext}</td>
                <td></td>
            </tr>
            <tr>
                <th>
                    type: email / type mismatch
                    <input value="foo" type="email" name="email-mismatch" />
                </th>
                <td>Typ stimmt nicht überein</td>
                <td>Bitte geben Sie eine E-Mail-Adresse ein.</td>
                <td>${wert} ist kein gültige E-Mail-Adresse</td>
                <td></td>
            </tr>
            <tr>
                <th>
                    type: url / type mismatch
                    <input value="foo" type="url" name="url-mismatch" />
                </th>
                <td>Typ stimmt nicht überein</td>
                <td>Bitte geben Sie eine URL ein.</td>
                <td>${wert} ist keine gültige Webadresse</td>
                <td></td>
            </tr>
            <tr>
                <th>
                    type: number / type mismatch
                    <input value="foo" type="number" name="number-mismatch" />
                </th>
                <td>Typ stimmt nicht überein</td>
                <td>empty string</td>
                <td>{keine fehlerhafte Eingabe möglich}</td>
                <td></td>
            </tr>
            <tr>
                <th>
                    type: date / type mismatch
                    <input value="foo" type="date" name="date-mismatch" />
                </th>
                <td>Typ stimmt nicht überein</td>
                <td>empty string</td>
                <td>{keine fehlerhafte Eingabe möglich}</td>
                <td></td>
            </tr>
            <tr>
                <th>
                    type: time / type mismatch
                    <input value="foo" type="time" name="time-mismatch" />
                </th>
                <td>Typ stimmt nicht überein</td>
                <td>empty string</td>
                <td>{keine fehlerhafte Eingabe möglich}</td>
                <td></td>
            </tr>
            <tr>
                <th>
                    type: time / type mismatch
                    <input value="foo" type="time" name="time-mismatch" />
                </th>
                <td>Typ stimmt nicht überein</td>
                <td>empty string</td>
                <td>{keine fehlerhafte Eingabe möglich}</td>
                <td></td>
            </tr>
            <tr>
                <th>
                    type: time / step mismatch
                    <input value="22:22" step="300" type="time" name="time-step" />
                </th>
                <td>Schritt stimmt nicht überein</td>
                <td>empty string</td>
                <td>${Wert} ist als Datum in diesem Feld nicht erlaubt. Es sind nur bestimmte Daten zulässig.</td>
                <td></td>
            </tr>
            <tr>
                <th>
                    type: time / range overflow
                    <input value="22:22" max="10:00" step="any" type="time" name="time-overflow" />
                </th>
                <td>Bereichsüberlauf</td>
                <td>empty string</td>
                <td>${Wert} ist zu hoch. 10:00 ist der oberste Wert, den Sie benutzen können.</td>
                <td></td>
            </tr>
            <tr>
                <th>
                    type: time / range underflow
                    <input value="09:22" min="10:00" step="any" type="time" name="time-underflow" />
                </th>
                <td>Bereichsunterlauf</td>
                <td>empty string</td>
                <td>${Wert} ist zu niedrig. 10:00 ist der unterste Wert, den Sie benutzen können.</td>
                <td></td>
            </tr>
        </tbody>
    </table>
    <input type="submit" value="interactive validation" />
</form>
<ul>
    <li>
        <small>* Safari hat keine interaktive validierung, haben offenkundig schlechte texte und noch gar keine fehler ui</small>
    </li>
    <li>
        <small>** Opera hat keinen gescripteten zugang zur validationMessage eigenschaft</small>
    </li>
</ul>

design by <a href="http://24ways.org/2005/tables-with-style">Tables with Style (24 ways)</a>

form {
    font: 0.8em "Lucida Grande",Tahoma,Arial,Helvetica,sans-serif;
}
th input {
    display: none;
}

.show-inputs th input {
    display: inline-block;
}

table {
    color: #FFF;
    background: #C00;
    border-collapse: collapse;
    min-width: 620px;
    width: 90%;
    max-width: 1100px;
    border: 5px solid #900;
}


thead th,
thead td {
    padding: 1em 1em .5em;
    border-bottom: 1px dotted #FFF;
    font-size: 120%;
    text-align: left;
}


td,
tbody th {
    padding: .5em 1em;
}

tbody tr:nth-child(2n) td,
tbody tr:nth-child(2n) th {
    background: rgba(210, 130, 130, 0.8);
}




col:nth-child(2n+1)
{
    background-color:#900;
}

jQuery(function($) {
    $('tbody tr').each(function() {
        var val = $('input', this).attr('validationMessage');
        if (!val) {
            val = (val == null) ? 'nix' : '(empty string)';
        }
        $('td:last-child', this).text(val);
    });
    if (document.addEventListener) {
        document.addEventListener('invalid', function() {
            document.body.className = 'show-inputs';
        }, true);
        document.addEventListener('submit', function() {
            document.body.className = 'show-inputs';
        }, false);
    }
});