<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);
}
});