これは、インラインイベントハンドラーよりも新しいアプローチを使用するアプローチです（例：）onchange=""。ご覧のとおり、これは属性によって駆動されます。現在、現在data-以外のものを処理するように構成されていませんが、s、sなどinput[type=text]で機能するように拡張できます。selecttextarea
以下のバージョンでは、イベントハンドラーをセットアップするattachEvent代わりにを使用しているため、IE8以下で動作するふりをすることはありません。addEventListener繰り返しになりますが、これは機能する可能性がありますが、他のすべての最新のブラウザーでは機能します。テストされていませんが、IE9で動作するはずです。
多くのことが起こっているように見えるかもしれませんが、それを見て、それがどのように動作するかを理解できるかどうかを確認してください。ご不明な点がございましたら、お気軽にお問い合わせください。
これがフィドルです（ChromeとFirefoxでテスト済み）：
http://jsfiddle.net/ndXTb/
HTML
<aside>
<ol id="errors"></ol>
</aside>
<section id="signup">
<form action="#">
<p>
<label for="fname">First Name:</label>
<span>
<input type="text" id="fname" name="fname" class="required"
data-validate-error="First name may not be empty."
data-error-sort="0"/>
</span>
</p>
<p>
<label for="lname">Last name:</label>
<span>
<input type="text" id="lname" name="lname" class="required"
data-validate-error="Last name may not be empty."
data-error-sort="1"/>
</span>
</p>
<p>
<label for="addr1">Address 1:</label>
<span>
<input type="text" id="addr1" name="addr1" class="required"
data-validate-error="Address may not be empty."
data-error-sort="2"/>
</span>
</p>
<p>
<label for="addr2">Address 2:</label>
<span><input type="text" id="addr2" name="addr2"/></span>
</p>
<p>
<label for="city">City:</label>
<span>
<input type="text" id="city" name="city" class="required"
data-validate-error="City may not be empty."
data-error-sort="3"/>
</span>
</p>
<p>
<label for="state">State:</label>
<span>
<input type="text" id="state" name="state" class="required"
data-validate-error="State may not be empty."
data-error-sort="4"/>
</span>
</p>
<p>
<span></span>
<span style="text-align: right;">
<input type="submit" value="Submit"/>
</span>
</p>
</form>
</section>
CSS
#signup {
display: table;
}
#signup form > p {
display: table-row;
}
#signup p > label,
#signup p > span {
display: table-cell;
font-weight: bold;
padding: 5px;
}
#signup p > label {
text-align: right;
width: 150px;
}
.validationerror input {
border: 1px solid #a00;
background-color: #ffd;
padding: 2px 1px;
}
.validationerror:after {
content: '!';
}
Javascript
window.addEventListener('load', function init(){
var signup = document.getElementById('signup'),
fields = signup.getElementsByClassName('required'),
errors = document.getElementById('errors'),
error = '<li>{error}</li>',
submitted = false,
errorlog = [],
index = 0,
field,
focusin;
signup.addEventListener('submit', validateform);
while (field = fields[index++]) {
field.addEventListener('blur', validatefield);
field.addEventListener('keyup', validatefield);
}
function validatefield() {
var message = this.dataset['validateError'],
sort = this.dataset['errorSort'],
parent = this.parentNode;
if (this.value === '' && (message && sort)) {
errorlog[sort] = error.replace('{error}', message);
parent.className += ' validationerror';
if (!focusin) {
focusin = this;
}
} else if (this.value !== '' && (message && sort)) {
delete errorlog[sort];
parent.className = parent.className.replace('validationerror', '');
if (focusin == this) {
focusin = null;
}
}
if (!submitted) {
isvalid();
}
}
function validateform(event) {
index = 0;
errorlog = [];
focusin = null;
submitted = true;
while (field = fields[index++]) {
callevt(field, 'focus');
callevt(field, 'blur');
}
submitted = false;
if (!isvalid()) {
if (focusin) {
focusin.focus();
}
focusin = null;
event.preventDefault();
return false;
}
}
function isvalid() {
errors.innerHTML = '';
if (errorlog.length) {
errors.innerHTML = errorlog.join('');
return false;
}
return true;
}
function callevt(el, type) {
var evt = document.createEvent('HTMLEvents');
evt.initEvent(type, true, true);
el.dispatchEvent(evt);
}
});