HTML+CSS+JavaScript

День добрый. Подскажите пожалуйста как на JS перед отправкой на сервер:

1. Проверить на непустототу поля <textarea>
2. Проверить на выбор хотябы одного RADIO buttona
3. Проверить на правильное заполнение рангов (рагни не должны повтряться. т.е от 1до n цифры должны быть уникальны)

Условие: поля имеют фиксированную текстовую часть (например: area) и динамичную циферную (например: 33, генерится при открытии страницы)

<form name='forma'  method='post'> <textarea name='area33'></textarea><br/> <br/> <input type='radio' name='rad2' value="1" > один<br/> <input type='radio' name='rad2' value="2" > два<br/> <input type='radio' name='rad2' value="3" > три<br/> <input type='radio' name='rad2' value="4" > четыре<br/> Проранжируйте от 1 до 4<br/> <input type='text' name='txt11[]' /> 1<br/> <input type='text' name='txt11[]' /> 2<br/> <input type='text' name='txt11[]' /> 3<br/> <input type='text' name='txt11[]' /> 4<br/> <input type='submit' value=Отправить"> </form>

<form name='forma'  method='post'> <textarea name='area33'></textarea><br/> <br/> <input type='radio' name='rad2' value="1" > один<br/> <input type='radio' name='rad2' value="2" > два<br/> <input type='radio' name='rad2' value="3" > три<br/> <input type='radio' name='rad2' value="4" > четыре<br/> Проранжируйте от 1 до 4<br/> <input maxlength="1" type='text' name='txt11[]' /> 1<br/> <!-- добавление maxlength не помешает --> <input maxlength="1" type='text' name='txt11[]' /> 2<br/> <input maxlength="1" type='text' name='txt11[]' /> 3<br/> <input maxlength="1" type='text' name='txt11[]' /> 4<br/> <input type='submit' value=Отправить" onclick="return TEST (this.form)"> </form>  <script> function TEST (frm) { var txt = frm.area33.value;                         //сохраняем в переменной содержимое TEXTAREA txt = txt.replace (/\s/g, '');                      //удаляем из сохранённого все пробельные символы if (!txt.length)                                    //если переменная имеет нулевую длину    {alert ('Не заполнено TEXTAREA'); return false}  //выходим из проверки и отменяем отправку формы //перебираем все элементы формы, в т.ч. и ненужные нам TEXTAREA и INPUT типа submit //что нестрашно, потому как проверка быстрая, а выделять только нужное для проверки - это много писать //В процессе перебора: //а) ищем отмеченную радиокнопку //б) сохраняем в одной переменной-строке RNG все значения текстовых полей for (var CH = false, RNG = '', el = frm.elements, j = 0, lj = el.length; j < lj; j++)    {    if (el [j].checked) CH = true;                   //тип INPUT'а не проверяем, checked бывает лишь у radio и сheckbox    if (el [j].type == 'text') RNG += el [j].value;    } if (!CH)                                            //если CH сохранила начальное значение false    {alert ('Не отмечен радиобаттон'); return false} //выходим из проверки и отменяем отправку формы //проверяем длину переменной RNG, в норме она должна быть равна 4-м var TL = (RNG.length == 4) ? true : false; //последовательно удаляем из переменной RNG первые встреченные цифры от 1 до 4 //если в ранге только эти 4-е цифры без повторений, то на выходе получится пустота for (var j = 1; j < 5; j++)    {var re = new RegExp (j); RNG = RNG.replace (re, '')} if (!TL || RNG.length)                              //если не 4-е цифры ИЛИ если они не уникальны от 1 до 4    {alert ('Неверное ранжирование'); return false}  //выходим из проверки и отменяем отправку формы return true;                                        //всё ОК, разрешаем отправку формы } </script>

И теперь всё тоже самое, но без комментов и покороче:

<script> function TEST (x) { var z = false, t = ['Не заполнено TEXTAREA', 'Не отмечен радиобаттон', 'Неверное ранжирование']; if (!x.area33.value.replace (/\s/g, '').length) {alert (t [0]); return z} for (var R = '', e = x.elements, j = H = 0, lj = e.length; j < lj; j++) if (e [j].checked) H = 1; else if (e [j].type == 'text') R += e [j].value; if (!H) {alert (t [1]); return z} for (var T = R.length, j = 1; j < 5; j++) R = R.replace (new RegExp (j), ''); if (T != 4 || R.length) {alert (t [2]); return z} return true; } </script>

Огромное спасибо, все работает, НО возникла проблемка.
Если будет сколь угодно ранговых вопросов и сколь угодно полей типа текстареа?

<form name='forma'  method='post'>  Вопрос 1<br/> <textarea name='area33'></textarea><br/>  Вопрос 2<br/> <input type='radio' name='rad2' value="1" > один<br/>  <input type='radio' name='rad2' value="2" > два<br/>  <input type='radio' name='rad2' value="3" > три<br/>  <input type='radio' name='rad2' value="4" > четыре<br/>  <!-- максимум 20 -->  Вопрос 3 (проранжируйте от 1 до 4)<br/>  <input maxlength="1" type='text' name='txt11[]' /> 1<br/>  <input maxlength="1" type='text' name='txt11[]' /> 2<br/>  <input maxlength="1" type='text' name='txt11[]' /> 3<br/>  <input maxlength="1" type='text' name='txt11[]' /> 4<br/>  Вопрос 4<br/> <textarea name='area44'></textarea><br/>  Вопрос 5 (проранжируйте от 1 до 6)<br/>  <input maxlength="1" type='text' name='txt7[]' /> 1<br/>  <input maxlength="1" type='text' name='txt7[]' /> 2<br/>  <input maxlength="1" type='text' name='txt7[]' /> 3<br/>  <input maxlength="1" type='text' name='txt7[]' /> 4<br/>  <input maxlength="1" type='text' name='txt7[]' /> 5<br/>  <input maxlength="1" type='text' name='txt7[]' /> 6<br/> <!-- максимум 30-->  <!-- сколь угодно разно типных вопросов-->  <input type='submit' value=Отправить onclick="return TEST (this.form)">  </form>

Как универсалить?

?

Уважаемый АЯС, на одного вас надеюсь...

Пара вопросов:

1. Что есть <!-- максимум 20 --> и <!-- максимум 30-->? Разные типы вопросов?

2. Возможно ли с точки зрения вёрстки страницы объединение в <div> всего, что относится к одному вопросу?
Например, так:

<div>Вопрос 3 (проранжируйте от 1 до 4)<br/>  <input maxlength="1" type='text' name='txt11[]' /> 1<br/>  <input maxlength="1" type='text' name='txt11[]' /> 2<br/>  <input maxlength="1" type='text' name='txt11[]' /> 3<br/>  <input maxlength="1" type='text' name='txt11[]' /> 4<br/></div>

Примечание: именно так - не требуется совсем никаких атрибутов для DIV'a - ни ID, ни CLASS... просто <div> и </div>

И одно предложение:
Если вопросов много, а форма - одна, то, мне кажется, разумным будет общей кнопки "Отправить" вовсе не делать, а добавить после каждого вопроса кнопку с надписью типа "Зафиксировать ответ" - скрипт при нажатии такой кнопки зальёт всю область вопроса каким-то фоновым цветом. И проверку проводить не всего массива ответов - а каждого вопроса. Что много удобнее, чем потом искать - а где же это, в каком из тридцати вопросов я не отметил радиокнопку?

Кроме того, это даст юзеру возможность отвечать не по порядку вопросов и при этом видеть - на какие вопросы он уже ответил. Далее - при нажатии на ПРЕДпоследнюю кнопку (фиксация предпоследнего ответа) скрипт предупредит юзера, что "Остался последний вопрос". При нажатии на последнюю кнопку скрипт отправляет форму. Как вариант - можно после нажатия каждой кнопки "Зафиксировать ответ" сообщать юзеру "Осталось ответить на ХХХ вопросов".

1. Что есть <!-- максимум 20 --> и <!-- максимум 30-->? Разные типы вопросов?

Это значит максиум 20 или 30 вариантов в конкретном типе (radiobutton или text для рангов)

2. Возможно ли с точки зрения вёрстки страницы объединение в <div> всего, что относится к одному вопросу?

Определенно - ДА

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

>"Касаемо предложения: это не тестирование, а опрос, с точки зрения задумки, требуется выводить все вопросы сразу."

Вы, походу, не поняли сути моего предложения.
Все вопросы выводятся СРАЗУ на одной странице, в одном теге <form>...</form>.
И отправляются ответы на сервер ОДИН раз, по окончании ответов на ВСЕ вопросы.

Просто общей кнопки отправить - НЕТУ.
Зато есть кнопочки "Готово" (либо "Зафиксировать ответ") под каждым вопросом.

Юзер фиксирует, что ОТВЕТИЛ на конкретный вопрос.
В этот момент "фиксации" и проводится проверка правильности заполнения ответов именно этого вопроса. Если всё ОК, то юзер может переходить к ответу на следующий вопрос (или - на ЛЮБОЙ из оставшихся вопросов). При этом вопросы, на которые юзер уже ответил, остаются на странице, но в "подсвеченном" виде (с изменённым цветом фона). Юзеру будет удобно.

Когда юзер ответит на ВСЕ вопросы, то только тогда все ответы уйдут на сервер. Либо автоматически после нажатия на кнопку "Готово" в последнем отвеченном им вопросе, либо даже можно сделать так, что появится кнопка "Отправить", на которую он и нажмёт.
----

Можно реализовать и без учёта моего предложения.

Выбор, конечно, за вами.
Но САМИ подумайте: тридцать вопросов, в каких-то пяти из них юзер неверно проранжирует.
Скрипт обнаружит самую первую ошибку и даже не просто укажет юзеру номер вопроса, где он неправильно проранжировал, но и прокрутит страницу до места, где нужно исправить. Юзер исправит свою ошибку, затем ему надо будет уже САМОМУ прокрутить страницу до самого низа и снова нажать на кнопку "Отправить". А там - следующая ошибка, в ранжировании вопроса №13. И опять крутить страницу вверх-вниз... и так - пять раз. А юзер уже и не помнит - почему он проранжировал именно так, отвечая на вопрос №13...

Ведь маразм получится, не находите?

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

А с учётом моего предложения таких проблем не будет. Ответил, нажал "Готово" (либо "Зафиксировать ответ") - тут же получил сообщения об ошибках в данном конкретном ответе (если они есть) и тут же их исправил (ничего никуда не прокручивая), снова нажал "Готово", и пошёл отвечать на следующий вопрос.
-----

PS. Ещё вопрос к вам. Количество чисел, расставляемых юзером по рангу, оно гарантированно меньше 10 (десяти)? Или могут быть случаи, когда ранжировать надо будет 11...12...125 чисел? Надо тогда алгоритм проверки уникальности чуть поменять. Да и значение для maxlength для этих случаев (если больше 9, или больше 99) надо будет менять (на двойку или тройку).

Ещё вопрос к вам. Количество чисел, расставляемых юзером по рангу, оно гарантированно меньше 10 (десяти)
- Определенно до 10

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

И ошибки все тоже в один алерт можно писать. Думаю больше 10-15 вопросов в 1 тесте (опросе) не будет

Была идея использовать Jquery для проверки поля на лету, но за незнанием матчасти, в дебри лезть вообще нет смысла. Вы согласны?

Итак, кол-во рангов до 10, вариантов тоже думаю до 10

Главное чтобы было возможно создавать N-ное кол-во вопросов с N-ным количеством однотипных (варианты, ранги, текстарии) ответов


Это осуществимо?

P.S: Можно как-то связаться с вами через ICQ или Skype?

>"не удобно тыкать каждый раз на "зафиксировать ответ"...

Была идея использовать Jquery для проверки поля на лету, но за незнанием матчасти, в дебри лезть вообще нет смысла. Вы согласны?"

Jquery точно не нужен - с этим я согласен :-)

Насчёт "не тыкать кнопкой" и "на лету" есть следующее соображение.
Можно те самые DIV'ы, о которых я написал выше, использовать как индикатор.
А именно:
1. изначально все DIV'ы прозрачны, т.е. сливаются с фоном.

2. как только юзер приступает к ответам на этот вопрос ("входит" в <textarea>, жмёт радиокнопку, начинает ранжировать) сразу включается проверка "на лету", коя завершается в момент, когда юзер переходит к другому DIV'у..

3. по итогам проверки - если ошибок заполнения нет, то цвет фона этого конкретного DIV'а заменяется на какой-то неяркий - бледно-зелёный, например. А вот если что-то заполнено не так - цвет становится вызывающе ярким, типа красного и внутри этого же DIV'a пишется сообщение об ошибке. Вернулся юзер к заполнению этого ошибочного вопроса - проверка вновь включилась.
Соответственно, если юзер просто "вошёл" в <textarea> и вышел из него, ничего не написав (или ткнул в поле ранга, но прописывать ничего не стал), то цвет остаётся начальным (прозрачным).

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

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

Так нормально будет? :-)

Определяйтесь и я вам быстренько набросаю код.

Что касается "количества вопросов" - то никаких проблем нет. Хоть три, хоть триста тридцать три.
Хоть все одного типа, хоть - всех трёх.
-----

>"Можно как-то связаться с вами через ICQ или Skype?"
Нельзя, не пользуюсь.
Только через мыло, если надо - bes2002_шавкаlist.ru

Это будет просто: замечательно

Заранее огромное спасибо, за потраченое на меня время. Буду ждать с нетерпением:)

Решение - в аттаче (изображение синей дискетки справа сверху) ===============>

СНАЧАЛА покрутите по-всякому именно ТОТ код, который я вам даю КАК ОН ЕСТЬ ("AS IS").
С точки зрения только и именно его функциональности и удобства.

Если возникнут вопросы/пожелания по моему коду - не стесняйтесь.
-----

А уже ПОТОМ прикиньте применимость этого кода к вашей вёрстке и к вашим нюансам (кои мне неизвестны).
Вполне может быть, что вас что-то не устроит в выбранном мною стиле оформления.
Или что-то где-то может быть надо расположить не так, и не в том месте...
Может, будут какие-то программные конфликты моего кода с вашим - вдруг у вас внутри формы много-много DIV'ов и SPAN'ов, да ещё вдруг и с совпадающими с выбранными мною ID - и мой код как-то влияет на них...
Также не стесняйтесь, спрашивайте.

Всё можно решить.

Вы просто мега-гуру:) аплодировали стоя.

Все отлично работает, без нареканий, данные отправляет на сервер без потерь, CSS сделала свой, с этим проблем нет.

Огромное вам человеческое спасибо. Вы очень выручили меня

Поторопились вы :-)

Я же просил "покрутить".
В общем, в MSIE код не работает.
Необходимы ДВА изменения.
-----------------------------------------
ПЕРВОЕ: вместо переписывания типа кнопки надо создавать новую, а существующую удалять.
Изменение следующие: строки с комментариями 19 и 20 удаляем. Вот эти:

//НАДО УДАЛИТЬ 5 строк el [j].type = 'button';                                                           //19. Переделываем тип кнопки сабмита на button if (window.addEventListener)    el [j].addEventListener ('click', TEST_sbmt, false); else el [j].attachEvent ('onclick', TEST_sbmt, false);                            //20. Навешиваем на кнопку "Отправить" функцию итоговой проверки //НАДО УДАЛИТЬ 5 строк

Вместо них надо прописать:

//НАДО ПРОПИСАТЬ вместо удалённого var btn = document.createElement ('input'); btn.type = 'button'; btn.value = 'Отправить'; el [j].parentNode.insertBefore (btn, el [j]);                                     //19. Создаём кнопку типа 'button' и прописываем её перед кнопкой сабмита if (window.addEventListener)    btn.addEventListener ('click', TEST_sbmt, false); else btn.attachEvent ('onclick', TEST_sbmt, false);                               //20. Навешиваем на эту кнопку функцию итоговой проверки el [j].parentNode.removeChild (btn.nextSibling);                                  //20а. Удаляем кнопку сабмита //НАДО ПРОПИСАТЬ вместо удалённого

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

ВТОРОЕ: спан в DIV'e под <TEXTAREA> надо создавать ДО назначения функции проверки самому <TEXTAREA>.
Изменение следующее - надо трём строкам с комментарием 10.1. изменить место в коде и прописать их сразу после строки с комментарием 10.4., вот так:

if (obj [j].getElementsByTagName ('textarea').length)                             //9. Определяем тип вопроса в DIV'е       {                                                                           //10. Если тип - "текстовое поле", то:       var t = obj [j].getElementsByTagName ('textarea') [0];       if (window.addEventListener)       t.addEventListener ('input', TEST_txt, false);       else t.attachEvent ('onpropertychange', TEST_txt, false);                   //10.1. назначаем ему функцию проверки "на лету"       T_txt [T_txt.length] = t.id = 'tTX' + (j + 1);                              //10.2. присваиваем ему технический ID и запоминаем его в массиве       var x = spn.cloneNode (1); x.id = 'tSP' + (j + 1);                          //10.3. Присваиваем SPAN'у для вывода сообшений об ошибке технический ID       obj [j].appendChild (x);                                                    //10.4. Добавляем этот SPAN в самый низ DIV'a        if (window.addEventListener)       t.addEventListener ('input', TEST_txt, false);       else t.attachEvent ('onpropertychange', TEST_txt, false);                   //10.1. назначаем ему функцию проверки "на лету"       }

Теперь будет работать и в MSIE.

PS. На всякий случай исправленную версию помещаю в аттач.

Верх мастерства!!! И правда, в ИА не проверяла:(

нашла еще кое что, влияющее на css, под полем textarea и radio всегда присутствует пустой span, можно его как нить убрать, а использовать только для ошибок?

Спаны (и под полем <TEXTAREA>, и под группой радиокнопок, и справа от каждого рангового инпута) - они не пустые, изначально в них помещён неразрывный пробел.

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

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

with (spn.style) {fontSize = '9pt'; color = 'red'; visibility = 'hidden'}          //4. Создаём шаблон SPAN'а для вывода сообщения об ошибке заполнения

И во всех трёх последних функциях (TEST_rng, TEST_txt, TEST_rd) надо найти строки, где есть innerHTML и там добавить изменение видимости.

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

Разумеется, можно не резервировать место под эти спаны, а "накладывать" их поверх существующего слоя. Тогда все DIV'ы c <TEXTAREA> и радиокнопками можно уменьшить по высоте на высоту этого самого спана.
Если очень надо - напишите. Позже сделаю.

Уважаемый АЯС, лишнии пробелы исчезли, все кроме после RADIO

и есди сделать

visibility = 'hidden'}          //4. Создаём шаблон SPAN'а для вывода сообщения об ошибке заполнения

то в ранжировании не выводятся никакие сообщения об ошибках

Странно... написал я вам, что надо сделать изменения во всех 3 (трёх) последних функциях.
И даже эти функции перечислил - TEST_rng, TEST_txt, TEST_rd

И сделал я эти изменения.
У себя.
И проверил.
И всё работает (у меня).

Пообещался я вам здесь выложить изменённый код всех этих трёх функций.
А выложил почему-то всего две.
Как раз код изменённой функции TEST_rng, коя отвечает за ранжирование, я почему-то и не выложил... :-((

См. в аттаче/приложении трётью версию всего кода :-)