Вот такой подход, который использует некоторые подходы, которые являются более современными, чем встроенные обработчики событий (например, onchange=""). Это обусловлено data- атрибутов, как вы увидите, и хотя он не настроен для обработки ничего, кроме input[type=text] прямо сейчас, она может быть расширена для работы с select с, textarea с, и т.д.
Что такое ниже не претендует на работу с IE8 и ниже, из-за этих версий с использованием attachEvent вместо 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);
}
});
Вот [несколько сложный пример] (http://jsfiddle.net/userdude/CMmDF/) (с помощью JQuery), но если вы посмотрите на обработке событий и функция, которая вызывается 'submit', более или менее вам просто нужно включить часть сообщения в функцию, которую вы можете называть как отправкой, так и в конце функции проверки, а затем использовать' blur' или 'change' для запуска события на каждое требуемое поле. –
@ Rachel взгляните на мой ответ, я протестировал его и его работу, я даже предоставил jsfiddle для вас .. –