Отображение сообщений об ошибках при заполнении полей формы

Если данные формы перед отправкой на сервер проверяются на правильность, то непременно возникает необходимость показывать пользователю сообщения об ошибках. Функция alert в этом случае не удобна, особенно если в форме допущены сразу несколько ошибок (представьте себе, что пользователю будут показаны сразу несколько алертов подряд, он может потом просто забыть, что ему нужно исправить). Идеальным выходом в этой ситуации может послужить выведение сообщений об ошибках прямо в форме, в тэг label возле поля, вызвавшего ошибку.

Исходный код этого примера:

<!--Если установить относительное позиционирование для тэгов label,
то в этом случае, установив для класса errorMsg абсолютное позиционирование,
можно помещать сообщение в любом месте относительно поля. -->
<style>
form label {
	position:relative;
}
.errorMsg {
	position:absolute;
	left:230px;
	width:300px;
	color:red;
}
</style>
<form id="frm" action="" onsubmit="return checkForm()">
  <label for="firstName">Имя:</label>
       <input id="firstName" name="firstName" value=""><br/>
  <label for="lastName">Фамилия:</label>
       <input id="lastName" name="lastName" value=""><br/>
  <input type="submit" name="go" value="Отправить" />
</form>

<script language=JavaScript>
<!--
//Функция проверки полей формы
function checkForm() {
  showError('firstName', 'Неверно заполнено поле!');
  return false;
}
// функция сообщения об ошибке
//В этой функции сразу создается элемент span с ошибкой errorMessage,
//которому присваивается имя класса errorMsg для установки стиля сообщений об ошибках.
//Затем добавляется этот элемент внутрь тэга label.
// field - поле, возле которого нужно вывести сообщение об ошибке
// errorMessage - сообщение об ошибке
function showError(field, errorMessage) {
	var errorSpan = document.createElement("span");
	var errorMessage = document.createTextNode(errorMessage);

	errorSpan.appendChild(errorMessage);
	errorSpan.className = "errorMsg";

	var fieldLabel = document.getElementById(field).previousSibling;
	while (fieldLabel.nodeName.toLowerCase() != "label") {
		fieldLabel = fieldLabel.previousSibling;
	}
	fieldLabel.appendChild(errorSpan);
}
//--> 
</script>

Скопировать в буфер

По мотивам статьи http://www.jstoolbox.com/skripty/rabota-s-formami/otobrazhenie-oshibok-vozle-polej-formy/

© Copyright 2008-2012 by KDG