Валидация формы
 

Оцените, выскажите мнение, и буду рад если кто сможет оптимизировать код или внести какие-либо полезные изменения.

p.s. файлы распаковать в одну директорию.

Выложи в песочницу, а то слишком лень качать, распаковывать, открывать и смотреть.

http://javascript.info/play
или github.com

Gozar,
Если не трудно, объясните как работать с песочницей??? Я не умею... Буду признателен

1) Заходишь в песочницу.
2) Работаешь.
3) Нажимаешь (сверху) кнопочку Save.
4) Копируешь ссылку.
5) Выкладываешь здесь.

Спасибо за помощь.
Теперь выкладываю здесь http://javascript.info/play/U4Gdib

Сперва идет проверка, на то все ли обязательные поля заполнены.
Потом проверяемся соответствие шаблону
и потом checkbox проверяет не бот ли вы.

Старался сделать как можно уневерсальнее код, чтобы можно было добавлять разное количество полей, и с разными шаблонами.
Где найдете не достатки может какие предложения, все выслушаю и постараюсь применить!

по-моему красные надписи на черном фоне выглядят зловеще...

Ну это больше вопрос дизайна.
Я просто старался чтоб ошибка сразу бросалась в глаза.
Кстати фон не черный а темносерый.
Спасибо. попробую поиграть с различными цветами. Может подберу более подходящий. а вы какой цвет посоветуете?

Mightyraven, имеет смысл использовать для input'ов типы, добавленные в HTML5.

Эх, интересно когда уже программисты перестанут издеваться над пользователями?

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

Снизу поля написать что с этим полем не так(у вас сделано)

Заучить это правило или повесить на скотч посреди монитора, до полного осознания.

Писать что пользователем допущены ошибки категорически не рекомендуется!

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


И на последок, уберите нафиг alert, вместо него поставить всплывающую подсказку с задержкой 3 сек, и затем её скрыть.

-по ряду причин у меня стоит монитор с высокой контрастностью (у других тоже). поэтому серый становится черным...

обычно я провожу опрос своих пользователей насчет цвета и выбираю результат по большинству мнений. в частности, если говорить о сообщениях об ошибках, то большинство склонилось к белому шрифту на красном фоне. Вроде бы и хорошо заметно и не раздражает как, например, красный шрифт на синем фоне. посмотреть можете тут: http://gigalit.info

Спасибо. дельные советы!!! исправлю...

И вам спасибо!!! опрос это интересный ход!

Покажусь занудой, но рекомендую параллельно с javascript изучать английский язык. Такие вещи, как inputSait, inputLogin.obyaz - это ужасно. К тому же, лично я считаю, что сказывается на качестве кода + плюс однозначно указывает на уровень программиста.
И еще по делу. Можно теперь попробовать сделать более универсальную функцию, которая бы подходила для любых форм.

А меня не трогает, главное чтобы было понятно что хранит переменная или на что указывает значение.

По поводу английского соглашусь.

Для названия переменных и функций поможет и ABBYY Lingvo... :D

А мне всегда казалось, что у гугловского переводчика алгоритмы лучше.

Я английский знаю малость. просто я не смог на английском подобрать слово обязательное поле, чтобы коротко было и понятно.
Конечно это меня не оправдывает и показывает мой низкий уровень. но я это сразу написал. Эта форма мая первая работа на JS. Поэтому стараюсь впитать все что мне говорят. Кстати можете помочь и написать свои варианты названия переменных.

inputURL, mustHave. :)

trikadin,
Спасибо. в исходнике уже перебил.

Что касается универсальности, Я и так старался сделать как можно универсальнее. но на другой части весов оказалось сложность и увеличение размера кода, поэтому я как я считал нашел середину. между универсальностью и громздким кодом.
В чем я вижу универсальность моей функции...
1. можно легко увеличить количество полей для этого: а) добавить их в html файл и присвоить ID. б) создать переменные-объекты из этих полей в JS в)добавить правила для нового поля в JS регулярным выражением
2. к тому же определение по id полей формы, позволяет их позиционировать в форме в любом порядке, то есть разрушая структуру DOM.
а если писать более универсальную, придется предусматривать все эти случаи.

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

:lol: чувство юмора есть. Это как один мой коллега выводил сообщение об ошибке на форме регистрации: "This email is busy, please choose another one".

Ну это ты зря.. Сейчас скрипт абсолютно неприменим к другим формам без необходимости существенных модификаций. Тот факт, что тебе надо
уже автоматом делает скрипт не универсальным. Для начала отлично, но можно попробовать написать скрипт, который бы был действительно универсальным, была бы для тебя отличная практика. Скажем функция принимает в себя два аргумента, ссылка на элемент формы и конфигурационный объект, в котором объявлены правила валидации. Вот это было бы уже новый уровень.

Про mustHave - это шутка была... Это английская идиома, означает "должен иметь" (дословно). А по сути - так говорят о чём-то, что необходимо каждому.

:)

Вашего сообщения ещё не было, когда я писал, ваый)

trikadin,
Я понял шутку... Я заменил inputSait на inputURL

ваый,
я не говорил что он универсальный.. Я сказал что универсальность и громоздкость по середине, как я считаю.
да и как можно прописать все регул выражения для проверки полей? мало ли какое поле захотят вогнать? например чтобы содержало слово "УФ"!!!
как это предусмотреть? так что рег выражения по любому придется добавлять в ручную в скрипт. как не крути.
и поля в Хтмл, придется все равно добавлять в ручную.
Что и делается в моем случае.
что же касается чтобы скрипт сам инициализировал все поля формы и давал им имена считал количество. В принципе возможно. но увеличит код. Я считаю это не оправданным. к тому жевсе равно придется привязывать к каким то полям обязательность заполнения и рег выражения в ручную.
Привязка автоматом возможна лишь при прописывании атрибутов в теге <input> в теле HTML. но определение обязательности через в теле HTML черевато, тем что пользователь может сохранить страницу формы на локальный комп удалить, допустим атрибуты обязательности, в атрибуте action тега form. прописать полный путь и спокойно отправлять. Я сам так делал на сайтах где макс длинна сообщения ограничивалась в теле ХТМЛ

Почему? Пусть вводят регулярку, какую им нужно, а твой скрипт будет проверять по ней... Что, не знаешь о создании регулярок из строк?)

trikadin,
я не до конца понимаю... что вы предлагаете.
кто будет вводить регулярку???

Mightyraven, вы сетуете на то, что придётся создавать миллион разных регулярок.

Так пусть их вводят программисты, которые будут пользоваться вашей библиотечкой. Псевдокод:

checkInput= function(input, regexp) {
 regexp= typeof regexp=="string" ?  new RegExp(regexp) : regexp; // если строка - делаем из неё регу, иначе думаем, что это и так рега
 ....
}

Просто передавать регу в функцию параметром, и всё...

Уф, как трудно дошло до меня, спасибо!

Mightyraven, да не за что...

Вариантов куча. Разница в том, в каком месте пользователь твоего скрипта должен что-то дописывать сам. Идея в том - и в этом смысл универсального скрипта, - что пользователь не должен править твою функцию вообще. Править, что-то дописывать в checkform.js в этом смысле вообще нельзя. Например, улучшенный вариант и его использование могло бы быть что-то типа такого (вызов функции):

checkForm(form, {
    username: {
        check: 'required length',
        min: 4
    },
    email: 'required email',
    site: 'required url',
    phone: {
        check: 'regexp',
        pattern: '^\(\d{3}\) \d{4}-\d{3}$'
    }
})

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

ваый,
В атрибутах НТМЛ??? я же про них писал...это не безопасно

В плане?

Серверная проверка всё равно должна быть.

Конечно, должна, а иначе просто отключаешь js в браузере и все формачка спокойно улетает...

Если честно, то дело вот в чем: Я придерживаюсь четкого правила, сам для себя придумал:

1. HTML только для нополнения, то есть создания элементов
2. Все вформатирование верстка только во внешних CSS таблицах
3. Вся динамика сайта, и изменение дом только во внеш файлах-скриптах

Это называется "ненавязчивый javascript". О нём можно у Резига почитать...

В принципе, хорошо, что вы этих правил придерживаетесь, но иногда от них можно отступить. Например, если вы делаете всплывающие подсказки, намного разумнее хранить текст подсказки в атрибуте, чем присваивать элементу айдишник, а дальше через этот айдишник в скрипте прописывать ему текст. Ну, или ещё как-то так извращаться. Смекаете?

Очень хорошие правила, все правильно. Мыслишь в правильном направлении! Только вот твой скрипт эти правила нарушает по всем пунктам, потому я и предложил подумать о том, чтобы переписать его, и сделать скрипт, который действительно можно использовать всерьез.

Где же он их нарушает?

:agree: Согласен с вами...
Я постараюсь учесть все замечания и написать более серьезную вещь.
А эту формочку будем считать чисто для конкретного сайта.