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

Если данные формы перед отправкой на сервер проверяются на правильность, то непременно возникает необходимость показывать пользователю сообщения об ошибках.

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

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

Если установить относительное позиционирование для тегов label, то в этом случае, установив для класса errorMsg абсолютное позиционирование, можно помещать сообщение в любом месте относительно поля.

В функции showError сразу создается элемент span с ошибкой errorMessage, которому присваивается имя класса errorMsg для установки стиля сообщений об ошибках.

Затем добавляется этот элемент внутрь тега label.
field - поле, возле которого нужно вывести сообщение об ошибке;
errorMessage - сообщение об ошибке.

Нажмите кнопку "Отправить", чтобы увидеть результат.

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

<style>
    form p {
        margin-bottom: 20px;
    }
    form label {
        position: relative;
    }
    .errorMsg {
        position: absolute;
        left: 0;
        top: 40px;
        width: 200px;
        color: red;
        font-size: 12px;
        font-style: italic;
    }
</style>
<form id="frm" action="" onsubmit="return checkForm()">
    <p>
        <label for="firstName">Имя:</label><br>
        <input id="firstName" name="firstName" value="">
    </p>
    <p>
        <label for="lastName">Фамилия:</label><br>
        <input id="lastName" name="lastName" value="">
    </p>
    <p>
        <input type="submit" name="go" value="Отправить">
    </p>
</form>

<script>
//Функция проверки полей формы
function checkForm() {
  showError('firstName', 'Неверно заполнено поле!');
  return false;
}
// функция сообщения об ошибке
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>