VPF::проверка полей на валидность - Форум программистов

MoLeX

Дата 17.10.2008, 06:33 (ссылка)

(нет голосов)

Загрузка ...

Местный пингвин

Профиль
Группа: Модератор
Сообщений: 4076
Регистрация: 17.5.2007

Репутация: нет
Всего: 140

Привет всем. Особой проблемы нет если речь идет о проверки поля input, а вот если textarea то есть. Для проверки использую следующий скрипт

validate.js

Код


/**
validate.js: ненавязчивая проверка HTML-форм.

После загрузки документа данный скрипт сканирует документ в поисках
HTML-форм и текстовых полей в формах. Если обнаруживаются элементы
с атрибутами "required" или "pattern", к ним добавляются соответствующие
обработчики событий, выполняющие проверку данных формы.

Если атрибут формы имеет атрибут "pattern", значение этого атрибута
используется регулярное JavaScript-выражение, а элементу назначается
обработчик события onchange, который проверяет ввод пользователя с помощью
этого шаблона. Если данные не соответствуют шаблону, цвет фона элемента
ввода изменяется, чтобы привлечь внимание пользователя.

По умолчанию текстовое поле должно содержать некоторую подстроку, которая
соответствует шаблону. Если требуется указать более строгое соответствие,
используйте якорные элементы ^ и $ в начале и конце шаблона.

Элемент формы с атрибутом "required" должен содержать какое-либо значение.
Если быть более точным, атрибут "reqiured" является краткой формой атрибута
pattern="\S". То есть этот атрибут требует, чтобы поле содержало хотя бы
один символ, отличный от пробела.

Если элемент формы прошел проверку, в атрибут "class" этого элемента
записывается значение "valid". В противном случае - значение "invalid".
Для коррекной работы validate.js необходимо вместе с ним использовать
таблицу CSS-стилей, где определяются стили для "неправильного" класса.
Например

<!-- Для привлечения внимания окрасить фон элементов формы,
     содержащих ошибки, в оранжевый цвет -->
<style type="text/css">input.invalid {background: #fa0; }</style>

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

Этот код не может использоваться для проверки форм или полей, в которых
вы определили собственный обработчик событий onchange или onsubmit,
а также полей, для которых вы определили свое значение атрибута class.

Весь программный код размещается внутри анонимной функции
и не определяет ни одного имени в глобальном пространстве имен.
**/

(function() { // Все, что требуется, выполняется внутри анонимной функции
    // По окончании загрузки документа вызвать функцию init()
    if (window.addEventListener)
        window.addEventListener("load", init, false);
    else if (window.attachEvent)
        window.attachEvent("onload", init);

    // Устанавливает обработчики событий для форм и элементов форм,
    // где это необходимо
    function init() {
        // Цикл по всем формам в документе
        for(var i = 0; i < document.forms.length; i++) {
            var f = document.forms[i];  // текущая форма

            // Предположить, что форма не требует проверки
            var needsValidation = false;

            // Цикл по всем элементам текущей формы
            for(j = 0; j < f.elements.length; j++) {
                var e = f.elements[j];  // текущий элемент

                // Интерес представляют только поля <input type="text">
                if (e.type != "text") continue;

                // Проверить, имеются ли атрибуты, требующие проверки
                var pattern = e.getAttribute("pattern");
                // Можно было бы использовать e.hasAttribute()
                // но MS IE не поддерживает его
                var required = e.getAttribute("required") != null;

                // Атрибут required - это лишь краткая форма записи
                // атрибута pattern
                if (required && !pattern) {
                    pattern = "\\S";
                    e.setAttribute("pattern", pattern);
                }

                // Если элемент требует проверки,
                if (pattern) {
                    // проверять при каждом изменении содержимого элемента
                    e.onchange = validateOnChange;
                    // Запомнить, чтобы потом добавить обработчик onsubmit
                    needsValidation = true;
                }
            }

            // Если хотя бы один элемент формы требует проверки,
            // то необходимо установить обработчик события onsubmit формы
            if (needsValidation) f.onsubmit = validateOnSubmit;
        }
    }
         
    // Эта функция - обработчик события onchange для текстового поля, которое
    // требует проверки. Не забывайте, что в функции init() мы преобразовали
    // атрибут required в pattern
    function validateOnChange() {
        var textfield = this;                            // текстовое поле
        var pattern = textfield.getAttribute("pattern"); // шаблон
        var value = this.value;                          // данные, введенные пользователем

        // Если значение не соответствует шаблону, установить
        // значение атрибута сдфыы равным "invalid"
        if (value.search(pattern) == -1) textfield.className = "invalid";
        else textfield.className = "valid";
    }

    // Эта функция - обработчик события onsubmit для любой формы,
    // требующей проверки
    function validateOnSubmit() {
        // Перед отправкой формы выполнить проверку всех полей в форме
        // и установить их свойства className в соответствующее значение.
        // Если хотя бы одно из этих полей содержит ошибку, вывести диалоговое
        // окно и заблокировать отправку данных формы.
        var invalid = false;  // Предполагаем, что все правильно
        // Цикл по всем элементам формы
        for(var i = 0; i < this.elements.length; i++) {
            var e = this.elements[i];
            // Если элемент - это текстовое поле, для которого установлен
            // наш обработчик события onchange
            if (e.type == "text" && e.onchange == validateOnChange) {
                e.onchange(); // Вызвать обработчик для повторной проверки
                // Если проверка не пройдена - значит вся форма не прошла проверку
                if (e.className == "invalid") invalid = true;
            }

            if (e.type == "textarea" && e.onchange == validateOnChange) {
                e.onchange(); // Вызвать обработчик для повторной проверки
                // Если проверка не пройдена - значит вся форма не прошла проверку
                if (e.className == "invalid") invalid = true;
            }
        }

        // Если форма не прошла проверку, вывести диалоговое окно
        // и заблокировать отправку формы
        if (invalid) {
            alert("Форма заполнена не полностью или были введены некорректные данные.\n" +
                  "Пожалуйста, проверьте правильность выделенных полей и повторите попытку.");
            return false;
        }
    }
})();

index.html

Код


<HTML>
<HEAD>
<TITLE>AKELLA | Настройки | Основные</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<META http-equiv=Content-Language content=ru>
<script src="validate.js" type=text/javascript></SCRIPT>
<STYLE type=text/css>
INPUT.invalid 
{
    BACKGROUND: #faa
}

INPUT.valid 
{
    BACKGROUND: #afa
}
</STYLE>
</HEAD>
<BODY>
<FORM name=form onsubmit="return checkform(this);" method=post>
<INPUT size=40 value="Title" name=title required><br>
<INPUT size=40 value="http://site" name=site required><br>
<INPUT size=40 value="email@site" name=mail pattern="^\s*\w+@\w+\.\w+\s*"><br>
<textarea rows=5 cols=10 name=textarea required></textarea><br>
<INPUT type=submit value=Сохранить name=submit> 
</FORM>
</body>
</html>

в чем тут проблема не могу понять smile

Добавлено через 59 секунд
вот еще архивчег

Присоединённый файл ( Кол-во скачиваний: 3 )

JS___________.rar 2,61 Kb

--------------------

Amazing

MoLeX

Дата 17.10.2008, 08:28 (ссылка)

(нет голосов)

Загрузка ...

Местный пингвин

Профиль
Группа: Модератор
Сообщений: 4076
Регистрация: 17.5.2007

Репутация: нет
Всего: 140

проблему решил почти полностью своими силами:
69 строка - меняем на if (e.type == "text" && e.type == "textarea") continue;

вот так (ну слепой не заметил я smile

)

а вот окрашивание поле textarea в цвет не выходит(((

--------------------

Amazing

ksnk

Дата 17.10.2008, 09:08 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

Цитата

а вот окрашивание поле textarea в цвет не выходит(((

А добавить

Код


TEXTAREA.invalid 
{
    BACKGROUND: #faa
}
TEXTAREA.valid 
{
    BACKGROUND: #afa
}

поможет?

Добавлено через 9 минут и 6 секунд
В принципе, работать с полем className нужно более сложно. По синтаксису допусается и такое значение class="text valid pretty" - перечисление классов через пробел. если писать универсальный скрипт, об этом, imho, стоит подумать...

Также, если будет стоять цель - писать полностью валидный код - нужно будет думать о переходе на xhtml. Дополнительные атрибуты в html - невалидны...

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

MoLeX

Дата 17.10.2008, 10:41 (ссылка)

(нет голосов)

Загрузка ...

Местный пингвин

Профиль
Группа: Модератор
Сообщений: 4076
Регистрация: 17.5.2007

Репутация: нет
Всего: 140

ksnk, спасибо тебе огромное, я и не заметил ((((
грешным делом начал всякие извращение делать

Код


obj.style.color = "";

эх, невнимательность да еще когда чужой код....
+1 тебе в репу...

но хотелось бы автоматом это сделать. т.е. независимо текстовое поле или инпут.

--------------------

Amazing

ksnk

Дата 17.10.2008, 10:53 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

А вот 69-ю строку скрипта я бы заменил на

Код


                if ((e.type != "text") || (e.tagName && e.tagName.toLowerCase()!= "textarea")) 
                    continue;

Как-то более правильно, чем предлагаемая замена. так как не всегда ложное значение будет подходить smile

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

MoLeX

Дата 17.10.2008, 11:40 (ссылка)

(нет голосов)

Загрузка ...

Местный пингвин

Профиль
Группа: Модератор
Сообщений: 4076
Регистрация: 17.5.2007

Репутация: нет
Всего: 140

ksnk, спб. так и сделал.

--------------------

Amazing

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »