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

Итак, допустим мы имеем следующую форму:

<form id="contactForm" 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>

Тогда функция, которая выводит сообщение об ошибках может выглядеть следующим образом:

// field - поле, возле которого нужно вывести сообщение об ошибке
// errorMessage - сообщение об ошибке
function showError(field, errorMessage) {
	var errorSpan = document.createElement("span");
	var errorMessage = document.createTextNode(errorMessage);

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

	var fieldLabel = field.previousSibling;
	while (fieldLabel.nodeName.toLowerCase() != "label") {
		fieldLabel = fieldLabel.previousSibling;
	}
	fieldLabel.appendChild(errorSpan);
}

В этой функции сразу создается элемент span с ошибкой errorMessage, которому присваивается имя класса errorMsg для установки стиля сообщений об ошибках. Затем добавляем этот элемент внутрь тэга label. Если установить относительное позиционирование для тэгов label, то в этом случае, установив для класса errorMsg абсолютное позиционирование, можно помещать сообщение в любом месте относительно поля. Пример:

form label {
	position:relative;
}
.errorMsg {
	position:absolute;
	left:230px;
	width:300px;
	color:red;
}

В этом случае сообщение об ошибке будет справа от поля.

Добавить в закладки:

Комментарии на “Отображение ошибок возле полей формы”

  1. Алексей Родионов:

    Ну неплохо неплохо

Оставить комментарий