AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

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

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





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

<!--Если установить относительное позиционирование для тэгов label,
то в этом случае, установив для класса errorMsg абсолютное позиционирование,
можно помещать сообщение в любом месте относительно поля. -->
<style type="text/css">
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 type="text/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-2016 by KDG