Если данные формы перед отправкой на сервер проверяются на правильность введенных значений, то непременно возникает необходимость показывать пользователю сообщения об ошибках. Функция 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;
}
В этом случае сообщение об ошибке будет справа от поля.
2 июня 2008 в 0:07
Ну неплохо неплохо