Проверка формы в JavaScript. Проверка формы на JavaScript

«Защитой от дурака» называется комплекс мер по пресечению ввода неправильной информации в форме. Например, если в поле требуется ввести положительное число от 0 до 10, то следует проверить, чтобы пользователь не ввёл текст или число, которое не лежит в указанном диапазоне, т.е. число не должно быть меньше нуля и больше десяти.

Почему происходит ввод неправильной информации? Это в основном совершается по трём причинам.

Пользователь ошибся случайно, например, невнимательно прочитал, что ему требуется указать.

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

Есть ряд людей, которые воспринимают инструкции как вызов и стараются поступить наоборот. Такие пользователи рассуждают примерно так: «Ага, меня просят ввести число. А что будет, если я укажу буквы?». После чего задают явно неправильную информацию и смотрят, к чему это приведёт.

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

Обязательное поле

Некоторые поля формы должны быть обязательно заполнены перед их отправкой на сервер. Это, к примеру, относится к форме регистрации, где требуется ввести логин и пароль. Для указания обязательных полей используется атрибут required , как показано в примере 1.

Пример 1. Атрибут required

HTML5 IE 10+ Cr Op Sa Fx

Обязательное поле

Логин:

Пароль:

Обязательные поля должны быть заполнены перед отправкой формы, иначе форма на сервер не отправится и браузер выдаст об этом предупреждение. Вид сообщения зависит от браузера, например Chrome выводит всплывающую подсказку, как показано на рис. 1.

Рис. 1. Обязательное поле не заполнено

Корректность данных

Исходно имеется два поля, в котором вводимые пользователем данные проверяются автоматически. Это веб-адрес и адрес электронной почты. Браузер Chrome также проверяет на корректность поле с календарными данными, но только потому, что у него не предусмотрен интерфейс выбора календаря щелчком мыши. Для этих элементов характерны следующие правила.

• Веб-адрес ( ) должен содержать протокол (http://, https://, ftp://).
• Адрес электронной почты ( ) должен содержать буквы или цифры до символа @, после него, затем точку и домен первого уровня.

У браузеров несколько различается политика по проверке данных пользователя. К примеру, Opera подставляет протокол http:// перед введённым текстом автоматически, тогда как другие браузеры ждут его от пользователя. Chrome и Opera требуют, чтобы в почтовом адресе была точка, для Firefox она не обязательна.

В примере 2 показана форма с обязательными полями, в которой два поля проверяется браузером.

Пример 2. Корректность данных

HTML5 IE 10+ Cr Op Sa Fx

Корректность данных

Заполните форму (все поля обязательны)

Имя:

Email:

Сайт:

Opera проверяет элемент формы только при наличии атрибута name.

Что происходит в Opera при вводе неверных данных показано на рис. 2.

Рис. 2. Предупреждение о неправильных данных

Шаблон ввода

Некоторые данные нельзя отнести к одному из видов элементов формы, поэтому для них приходится использовать текстовое поле. При этом их ввод происходит по определённому стандарту. Так, IP-адрес содержит четыре числа разделённых точкой (192.168.0.1), почтовый индекс России ограничен шестью цифрами (124007), телефон содержит код города и конкретное количество цифр часто разделяемых дефисом (391 555-341-42) и др. Браузеру необходимо указать шаблон ввода, чтобы он согласно нему проверял вводимые пользователем данные. Для этого используется атрибут pattern , а его значением выступает регулярное выражение . Некоторые типовые значения перечислены в табл. 1.

В примере 3 просят ввести шестнадцатеричное значение цвета (#ffcc00) и если оно не лежит в этом диапазоне, браузер выводит сообщение об ошибке.

Пример 3. Шаблон ввода

HTML5 IE 10+ Cr Op Sa Fx

Ввод цвета

Введите шестнадцатеричное значение цвета (должно начинаться с #)

На рис. 3 показано предупреждение в браузере Chrome.

Рис. 3. Введённые данные не соответствуют шаблону

Отмена валидации

Валидация не всегда требуется для формы, к примеру, разработчик пожелает использовать универсальное решение на JavaScript и дублирующая проверка браузером ему уже ни к чему. В подобных случаях необходимо отключить встроенную валидацию. Для этого применяется атрибут novalidate тега . В примере 4 показано использование этого атрибута.

Пример 4. Отмена валидации

HTML5 IE 10+ Cr Op Sa Fx

Атрибут novalidate

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

Очень часто возникает необходимость добавления формы на сайт, ведь форма - это самый популярный способ общения пользователя с сайтом, и очень важно, чтобы данные, ведённые пользователем были корректными. И чтобы форма была отправлена с верными данными необходимо её перед этим проверить. И вот проверкой формы в JavaScript мы и займёмся в этой статье.

Давайте для начала создадим форму, которую потом будем проверять:

Ваше имя:



Ваш пароль:



Ваш пол:




Выберите число:

1
2
3



Ваше сообщение:



Согласитесь с нашими правилами:




Загрузите файл:

Вот такая форма. Надеюсь, что с HTML Вы знакомы и объяснять, думаю, ничего не стоит. Если что-то непонятно, то посмотрите на работу этого кода в браузере.

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

Document.имя_формы.имя_поля.value;

То есть сначала обращаемся к объекту Document , затем к его свойству Form (через имя формы), потом к имени поля данной формы, и, наконец, к значению поля . Давайте выведем все поля, которые подчиняются этому общему виду:

Var form = document.form1;
document.write(form.firstname.value + "
");
document.write(form.pass.value + "
");
document.write(form.number.value + "
");
document.write(form.message.value + "
");
document.write(form.rules.value + "
");
document.write(form.hidefield.value + "
");
document.write(form.fileupload.value + "
");
document.write(form.sub.value + "
");
document.write(form.but.value + "
");

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

Теперь поговорим об одном особенном элементе формы - radio . Получим доступ к значению radio :

Var sex = (document.form1.sex.checked)?
document.form1.sex.value: document.form1.sex.value;

Обратите внимание, что у нас есть два элемента radio , которые находятся в массиве sex . Индексы у них 0 и 1 . В данном скрипте мы проверяем, если у нас первый элемент включён (checked ), то присваиваем значение первого элемента, иначе присваиваем значение второго элемента. Кстати, если кто не понял, то это такая конструкция оператора условия IF . Разумеется, можно было бы написать и так:

Var sex;
if (document.form1.sex.checked) sex = document.form1.sex.value;
else sex = document.form1.sex.value;

Теперь, когда мы получили доступ ко всем полям, давайте с Вами, наконец, сделаем проверку формы. Но сначала давайте добавим в тег атрибут "onSubmit " со значением "return check(); ". Данный атрибут будет делать следующее: перед отправкой формы вызывать функцию, которая должна будет вернуть либо true , либо false . Если она вернёт true , то форма отправится на сервер, а если false , то форма не будет отправлена.

Теперь создадим функцию check() , которая должна, во-первых, проверять полностью форму, сообщать пользователю об ошибках, а также возвращать true (если форма полностью правильная), либо false (если форма содержит ошибки).

Function check(form) {
var firstname = form.firstname.value;
var pass = form.pass.value;
var message = form.message.value;
var rules = form.rules.value;
var file = form.fileupload.value;
var bad = "";
if (firstname.length < 3)
bad += "Имя слишком короткое" + "\n";
if (firstname.length > 32)
bad += "Имя слишком длинное" + "\n";
if (pass.length < 3)
bad += "Пароль слишком короткий" + "\n";
if (pass.length > 32)
bad += "Пароль слишком длинный" + "\n";
if (message.length < 3)
bad += "Сообщение слишком короткое" + "\n";
if (rules != "on")
bad += "Вы не согласились с правилами" + "\n";
if (file.length == 0)
bad += "Вы не выбрали файл для загрузки" + "\n";
if (bad != "") {
bad = "Неверно заполнена форма:" + "\n" + bad;
alert(bad);
return false;
}
return true;
}

В данном скрипте мы сначала получаем все данные, нуждающиеся в проверке, и записываем их в переменные. Затем создаём переменную bad , в которую записываем все некорректные данные. Затем идёт целый набор IF , которые проверяют поля в форме и записывают все ошибки в переменную bad . Затем, если переменная bad не пустая (то есть были ошибки), то выводим окно (alert() ) с ошибками. И возвращаем false , чтобы форма не была отправлена. Если переменная bad пустая, то дальше просто возвращаем true , чтобы форма была отправлена уже на обработку в "handler.php ".

При добавлении на сайт той или иной формы, к примеру, формы обратной связи, часто возникает необходимость проверки всех или некоторых полей перед отправкой на предмет их заполненности. Теоретически это можно сделать средствами PHP, однако использование JavaScript позволяет разгрузить серверный скрипт, перенеся все действие непосредственно в браузер пользователя.

Предположим, что у нас есть небольшая форма, состоящая из двух input-ов (text и password), textarea и кнопки отправки (input submit). Наша задача – непосредственно перед отправкой формы проверить два первых input и textarea на пустоту. Если пустых полей не будет, то форма должна отправляться. Если пустые поля будут, то их необходимо обвести красной рамкой, вывести сообщение в виде alert о том, что необходимо заполнить все поля, а затем запретить отправку формы. После того, как пользователь уберет alert, цвет рамки полей должен вернуться в изначальное состояние. Красиво оформить саму форму Вам поможет сайт Жеки Несмелова .

Для того, чтобы все работало, как надо, к событию onsubmit формы привяжем возвращаемое функцией send() значение. Данная функция будет возвращать true или false в зависимости от того, все ли поля заполнены. Если вернется false, то при нажатии на кнопку форма не отправится, если true – то отправится. Заметьте, что мы не задаем полям id (так их бы было гораздо проще выцепить через DOM-модель JavaScript).

Проверка заполненности полей формы на JavaScript

Теперь переходим к JavaScript-коду. Здесь будет две функции. Первая функция send() осуществляет непосредственную проверку. По значению переменной valid мы поймем, заполнены ли все поля после того, как проверка окончится. В elems помещаем все элементы первой формы (индекс = 0) нашего документа. Вместо 0 можно использовать, к примеру, имя формы в виде строки (если оно задано). Далее в цикле проходим по всем элементам данной формы, попутно проверяя, является ли текущий элемент textarea, либо input с type = text || password. Если это так, то проверяем значение value данного элемента. Ведь именно в value будет лежать текст, введенный пользователем. Если value = пустой строке, то присваиваем border-у элемента красный цвет, а переменную valid ставим в false. В самом конце после прохождения всех элементов проверяем valid. Если там false – выводим alert, запрещаем отправку формы и подсвечиваем красным лишь те поля, которые не заполнены. В противном случае отправляем форму.

Вторая функция в JavaScript-коде будет выполняться сразу после загрузки документа. При наведении курсора мыши на форму (событие onmouseover) в цикле начнется перебор всех ее элементов. Если у какого-либо из элементов CSS-свойство border = "2px solid red", то ему присваивается значение по умолчанию (красный цвет убирается).

На этом все. Осталось только красиво оформить вашу форму!

Оставь комментарий, нажми «Мне нравится » («Like ») и «Сохранить », а я напишу для тебя еще что-нибудь интересное:)

В нашем примере у нас 5 полей, которые необходимо заполнить:

- имя
- сообщение
- e-mail
- контактный телефон
- контрольное число для защиты

Помимо простой проверки на пустоту поля, мы покажем

как проверить правильно ли введен e-mail и телефон

Проверять поля мы будем с помощью JavaScript. В последнее поле необходимо ввести определенное число (для защиты от автоматического заполнения). Если поля будут пустыми, появится alert-окно с уведомлением. К данному скрипту мы сразу прибавили отправку заполненной формы на почту, делать мы это будет с помощью php.

Итак, создаем файл index.php и пишем туда следующую форму:

1. Ваше имя:

2. Сообщение:

3. E-Mail

4. Контактный телефон

3. Введите сумму 10+10





Создаем файл data.js , пишем в него код проверки:
function Formdata(data){
/* если не заполнено поле Ваше имя, длина менее 3-x*/
if (data.fnm != null && data.fnm.value.length < 3)
{
alert("Заполните поле "Ваше имя"");
return false;}

/* если не заполнено поле Сообщение */
if (data.text != null && data.text.value.length < 3)
{
alert("Заполните поле "Сообщение"");
return false;}

/* e-mail Юзера */
if(data.email != null && data.email.value.length == 0)
{
alert("поле "E-Mail" пустое");
return false;}

if(data.email != null && data.email.value.length < 6)
{
alert("слишком короткий "E-Mail"");
return false;}

if(!(/^w+[-_.]*w+@w+-?w+.{2,4}$/.test(data.email.value)))
{
alert("Введите правильный E-Mail адрес");
return false;}

/* контактный телефон */
if(data.phone != null && data.phone.value.length == 0)
{
alert("поле "Контактный телефон" пустое");
return false;}

if(data.phone != null && data.phone.value.length < 5)
{
alert("поле "Контактный телефон" должно содержать минимум пять символов");
return false;}

if(!(/^+z/.test(data.phone.value+"z")))
{
alert(""Контактный телефон" указан неверно");
return false;}

/* делаем чтобы поле сумма было равно определенному числу */
number = document.getElementById("summa");
if (number.value !== "20")
{
alert(""Сумма" не введена или введена неверно");
return false;}
} Подгружаем данный файл в наш документ, помещаем его между тегами head:

Вот и готова наша проверка. Теперь после того, как все данные введены отправляем нашу форму нам на почту.
В файл index.php пишем php-код:

Все мы когда-нибудь заполняли формы. Кое-кто даже обрабатывал собранные ими результаты, будь то сделанные в интернет-магазине заказы, или обратка по сервису. Прося пользователя заполнить какую-либо информацию, мы хотим, чтобы она соответствовала определенному формату, особенно если в дальнешем она обрабатывается CMS вроде 1C bitrix, WorldPress, и так далее. Ведь если в графе телефон пользователь зачем-то запишет свой логин Skype, может возникнуть ошибка обработки данных: они не запишутся, и пользователя снова выбросит на страницу заполнения формы. Следовательно, возникает вопрос о том, как бы провести проверку введенных данных в режиме он-лайн и не допустить отправку некорректных данных.

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

Постановка задачи

Сделать простенькую javascript-проверку полей формы перед ее отправкой на сервер – дело пары минут. Только вот когда эту простенькую пишешь десятый раз для одного только сайта, невольно задумаешься об автоматизации этого процесса. В какой-то момент мысли об этом стали столь навязчивы, что пришлось сесть и накатать миниатюрную библиотеку, разбирающуюся с полями.

Если разбить задачу на блоки, то получится примерно следующая схема:

Ну, если схема есть, то давайте уж ее реализуем.

Анализ вариантов проверок.

Какие поля чаще всего встречаются в формах?

• Текстовые инпуты, которые, как правило, проверяются либо просто на заполненность, либо на несложные регулярные выражения вроде email-а или телефона.
• Чекбоксы, проверяемые на наличие отметки (вроде соглашения на обработку личных данных).
• Можно упомянуть и выпадающие списки, проверяемые на какое-нибудь непустое значение.
• Не стоит забывать и о коварных радиокнопках. Почему коварных? В проверке на отметку есть подводные камни.

Разумеется, поле может быть как обязательным к заполнению, так и необязательным. Возможна ситуация, когда поле необязательно, но раз уж заполняешь его – делай не абы как, а по правилу определенному.

Раз уж мы взялись писать более-менее универсальный скрипт, то нужно подумать и о извращенных необычных конструкциях, которые в дальнейшем будут называться «группы». Под этим словом будем подразумевать связанные друг с другом поля. Например, если пользователь поставил флажок «Присылать на почту новости» - становится обязательным к заполнению пункт «e-mail», или телефон нередко любят разделять на код и сам номер – тогда корректность должна проверяться по всем полям, а некорректность одного влечет за собой ошибку в обоих. Да и сообщение об ошибки надо выводить не у всех полей групы, а только у одного, иначе от их количества начнет в глазах рябить.

Какой вывод можно сделать?
Надо организовать обычную проверку на текстовое поле, проверку на email и «цифровые» поля вроде телефона, возраста, итп. Чекбоксы и радиокнопки проверяем на свойство checked, выпадающие списки – по значению. Чтобы удовлетворить хитрые группы – написать обработчик и для них. Кроме того, обеспечить возможность проверки некоторых полей какой-нибудь пользовательской функцией для особо замороченных случаев.

Организация хранения информации о проверяемых полях и типах проверки. Допустим, нам надо проверить на е-мейл такой инпут:

На мой взгляд, вариантов хранения тут всего два:

Создаем javascript-объект, в котором храним необходимые для проверки поля.

Засовываем информацию о проверках непосредственно в теги полей.

JS-объект будет быстрее работать, да и смотреться куда корректнее, нежели какие-то нестандартные атрибуты в тегах. Скажем, выглядеть он будет так:

Var checkThis={ handle: "$("")",//указатель на проверяемое поле type: "email",//тип проверки: обычная, емейл, цифра title:"введите сюда емейл, например",//хинт об ошибке nesess: true,//флаг обязательности group: false,//указатель группы }; var AllChecks=;//а это - массив, где хранились бы все проверяемые объекты

Если программист добирается до сайта, когда он уже полностью сверстан (то есть действие происходит в фантастическом романе ) – такой подход прекрасен. Но зачастую что-то обязательно будет доделываться, в том числе могут дописываться дополнительные поля или создаваться новые формы, а оставлять добавление обработчиков полей на совесть верстальщиков, даже при наличии написанного конструктора, - значит обрекать себя на постоянные обращения с их стороны в стиле «а у меня тут все поломалось». И тогда о главном постулате задумки, автоматизации (ну, точнее, избавлении себя-любимого от ненужных телодвижений), придется забыть.

Тогда можно попробовать засовывать данные о проверке в нестандартные атрибуты, превращая лаконичное

в громоздкого монстра вроде Остановимся мы именно на этом варианте. Мы же за универсальность.

Затем введем следующие обрабатываемые теги:

title	Он, конечно, стандартный, но сюда мы запишем сообщение об ошибочном заполнении поля. И выводить будем в стиле «Укажите »+title
cfm_check	Флаг проверки, именно по нему мы и будем искать проверяемые поля. А значения он может принимать следующие: Y – значит, надо проверять email или num – обозначает стандартную проверку на email или цифры/телефон при заполненности Y_email / Y_num – обязательная проверка на email или num groupID{Y} – заключение элемента в группу с идентификатором groupID с параметрами проверки, указанными в скобках
cfm_confirminfo	По умолчанию ошибки будут выводиться сразу после проверяемого элемента, что не всегда удобно. Так пусть же в этом атрибуте мы укажем jq-селектор на элемент, после которого выводить ошибку. Например, cfm_confirminfo=’#placeForErrors’
cfm_function	Чтобы не усложнять перегруженный cfm_check, сюда мы запишем название нестандартной функции-проверки поля

Скрипт проверки заполненности полей.

Информацию мы получили, осталось лишь ее обработать. Алгоритм здесь не замороченный:

• на вход подаем указатель на форму, в которой делать проверку (у нас же много форм может быть на странице!);
• пробегаем по указанным элементам формы, проверяя корректность заполнения;
• если ошибки есть – маркеруем их, если нет – разрешаем проверку формы.

Наверное, уже пора выдать js-код, реализующий функционал хотя бы частично, раз уж отписана такая куча текста?

If(typeof cFM_classError === "undefined")//сюда запишем css-класс, приписывающийся неправильным полям var cFM_classError="cFM_wrong"; function cFM_checktrueAttr(parent)//подготавливает данные к обработке //(parent – jq-указатель на форму, или объединяющий блок) { var error=true; //подчищаем за вызванной ранее функцией $("div."+cFM_classError).remove();//убираем подсказки $("."+cFM_classError).each(function(){//убираем подсветку ошибок $(this).removeClass(cFM_classError); }); //ищем поля для проверки var inputsToHandle=false; if(typeof parent !== "undefined") inputsToHandle=parent.find(""); else inputsToHandle=$("");//ну, а если родитель не задан – давайте уж все проверим //хватаем найденные элементы и наблюдаем их inputsToHandle.each(function(){ if(error) error=cFM_prepareChecking(this);//проверяем объекты, ищем хотя бы единственную ошибку else cFM_prepareChecking(this); }); return error;//возвращаем true, если все элементы прошли ошибку, и false, если кто-то завалился } function cFM_prepareChecking(handle)// запускает проверку конкретного элемента и маркерует ошибочные { var error=true;/*возвращаемое значение; смысл - просто показать, что есть ошибка принимает значение: true - нет ошибок; false - поле не заполнено; "wrong" - поле заполнено неправильно;*/ //определяемся с подписью поля в случае обнаружения в нем ошибки. По умолчанию будет выводиться //"Укажите значение поля", если title не задан var title = " значение поля"; if(typeof $(handle).attr("title") !== "undefined" && $(handle).attr("title").length>0) title=$(handle).attr("title"); var after = handle;//куда лепить сообщение об ошибке var attribute = $(handle).attr("cFM_check");//значение великого атрибута cFM_check //а не задали ли какую хитрую функцию для проверки поля? if(typeof $(handle).attr("cFM_function") !== "undefined") var chkFunk=$(handle).attr("cFM_function"); //наконец, проверяем поле if(typeof chkFunk !== "undefined") error=window($(handle)); else error=cFM_checkFullness(handle); //коль ошибка закралась к нам if(error!==true) { //определяем, куда лепим сообщение об ошибке if(typeof $(handle).attr("cFM_confirmInfo") !== "undefined") { after=$(handle).attr("cFM_confirmInfo"); if(after.indexOf("self")===0)//если вдруг селфы непойми зачем прилепили after=after.substr(4); } if(error==="wrong")//коль поле заполнено неправильно $(after).after("

Неверное значение поля

"); else{ if(error===false)//коль не заполнено вообще $(after).after("

Укажите "+title+"

");//html ошибки else//если особая проверка с особой html $(after).after(""); } $(handle).addClass(cFM_classError);//добавление класса ошибки if($(handle).attr("type")=="radio")//дорабатываем радиокнопки $("").addClass(cFM_classError); error=false; } return error; } function cFM_checkFullness(handle)//а это стандартная функция проверки { var error = true; //считываем данные с атрибутов var attribute = $(handle).attr("cFM_check"); //флаг обязательности var required = true; if(attribute.indexOf("Y")===-1) required=false; //проверка на формат var format=attribute; if(required) format=attribute.substr(2); switch($(handle).attr("type"))//смотрим, что же у нас за элемент такой { case "checkbox": if(!$(handle).prop("checked")) error=false; break; case "radio"://обещанная проблема с radio if(!$(handle).prop("checked") && $(":checked").length==0) error=false; else error=true; break; //и text, и select, и textarea здесь идентичны default: if(($(handle).val().trim().length==0 || $(handle).val()=="0") && required) error=false; else { if(format==="num")//проверка на число { var regCheck = new RegExp("[^0-9\s-]+"); if(regCheck.test($(handle).val())) error="wrong"; } if(format==="email")//проверка на е-мейл { var regCheck = new RegExp("^(+[-._+&])*+@([-0-9a-zA-Z]+[.])+{2,6}$"); if(!regCheck.test($(handle).val())) error="wrong"; } } break; } return error; }

В качестве примера приведем так же особую функцию проверки, например, проверяющую на наличие двух слов в инпуте (Имя Фамилия или Имя,Фамилия). Инпут, запускающий проверку по этой функции реализуется таким образом:

А функция проверки будет выглядеть, например, так: function checkName(handle) { var handleValue=handle.val().trim(); //как показывает практика, пользователи чем только не отделяют свое имя от фамилии if(handleValue.indexOf(" ")!==-1 || handleValue.indexOf(",")!==-1 || handleValue.indexOf(".")!==-1) return true; else return false; } Ну и стиль надо бы какой-нибудь нашей проверке задать: div.cFM_wrong { color:red; font-size:10px; position:absolute; width:140px; } input.cFM_wrong{ background: #ffd9d9; border-color:#d3adad; } Скрипт валидации формы.

Теперь в случае успешного выполнения функции cFM_checkFullness() (то есть возвращения true) скрипт должен отсылать форму на обработку. Как это реализовать - зависит уже от конкретной формы. Если подтверждение на отправку идет через кнопку submit - то можно подписаться на событие отправки формы (onsubmit) и в зависимости от результата проверки отсылать ее или нет. Например, так:

а тут типа куча тегов формы Если же отправка идет с помощью ajax"а - то тут вообще все просто: вызывать его в зависимости от результата работы функции cFM_checktrueAttr($(this)); Дополнительные заморочки.

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

Что же мы имеем в итоге? Подключая пару файлов (.js и.css), получаем функционал проверки свойств, который можно со спокойной душой кидать на любые сайты, при условии подключенного jquery. Ведь куда приятнее иметь под рукой набор готовых инструментов, чем тратить кучу времени на их производство перед каждой однотипной задачей.

Подключение и примеры

Во-первых нам понадобится библиотека jquery. Скачать ее можно, например, с официального сайта .
Или же просто вставить в шапку (то, что внутри тега ) вашего сайта строку

Затем качаем (правой клавишей -> понравившийся пункт со словом «сохранить») отсюда файл с js-кодом и, если нужно, файл с css-стилями для ошибочных полей отсюда .
Добавляем в шапку и их тоже: Теперь нужно расставить атрибуты полям формы согласно , в зависимости от того, какую проверку вы хотите совершить.
Последний штрих - добавление тегу события onsubmit: «onsubmit="return cFM_checktrueAttr($(this));"».

Давайте теперь попробуем реализовать проверку такой простенькой формы.