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

[frops]

Здравствуйте :biggrin: . Такая проблема. Может у кто-то поделиться своими идеями.

1. Существует форма, а точнее опрос, состоящий из нескольких вопросов.
2. В каждом вопросе существуют разного рода элементы: input[type="checkbox,radio,text"], а также select и textarea.
3. Нужно как-то провести проверку, на каждом вопросе:
4. Для checkbox'а нужно, чтобы хотя бы один элементы был checked, для radio - понятное дело, чтобы был выбран jlby ответ, для text - должен присутствовать текст, ну и т.д.

Мне нужно до отправки формы проверить все эти элементы на заполненность. И если что-то не заполнено, выводить об этом сообщение (это я уже сам сделаю).
Главная тут цель - проверить.

Вот примерный код:

<form id="form1">
<div class="qst"> <!-- ВОПРОС 1 -->
<div class="row"><label><input type="radio" name="q1" value="1"/> Раз</label></div> <!-- Варианты ответа -->
<div class="row"><label><input type="radio" name="q1" value="2"/> Два</label></div>
<div class="row"><label><input type="radio" name="q1" value="3"/> Три</label></div>
</div>
<div class="qst"> <!-- ВОПРОС 2 -->
<div class="row"><label><input type="checkbox" name="q2_1" value="1"/> Ч Раз</label></div> <!-- Варианты ответа -->
<div class="row"><label><input type="checkbox" name="q2_2" value="2"/> Ч Два</label></div>
<div class="row"><label><input type="checkbox" name="q2_3" value="3"/> Ч Три</label></div>
</div>
<div class="qst"> <!-- ВОПРОС 3 -->
<div class="row"><label><input type="text" name="q3"/></label></div> <!-- Вариант ответа -->
</div>
<div class="qst">
<div class="row"><label><input type="button" onclick="checkform();return false;" value="Отправить"/></label></div>
</div>
</form>

checform - функция проверки формы, которой пока можно сказать нет.

JSFIDDLE: http://jsfiddle.net/j24W4/1/

p.s.1. Я знаю как это все проверять на стороне сервера.
p.s.2. Хотелось бы услышать Ваши идеи по поводу решения такой задачи.

 

[Indev29]

Добавьте к кнопке id и используйте JS (покажу на примере JQuery)

<script type=text/javascript>
$(document).ready(function(){ //Начать после загрузки страницы;
$('#button_id').click(function(){ //Клик по кнопке;
if ($('input[name=q3]').val() == '')
{
//Сообщение об ошибке;
}
if($('input[name=q2_1]').is(':checked')==false) //И так далее (name=q2_2, name=q2_3);
{
//checkbox не отмечен;
}
});
});
</script>

 

[motek]

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

 

[brevis]

Хотелось бы услышать Ваши идеи по поводу решения такой задачи.

Всё придумано до нас -- jQuery plugin: Validation.
Вот так это прикручивается к твоей форме.

 

[frops]

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

motek, ты молодец, хорошая статья на 3wcom. Спасибо.

Всё придумано до нас -- jQuery plugin: Validation.
Вот так это прикручивается к твоей форме.

Спасибо, неплохая идея. Но опять же подгрузка лишних библиотек. Однако, как вариант.

 

[A-F]

Добавьте к кнопке id и используйте JS (покажу на примере JQuery)

<script type=text/javascript>
$(document).ready(function(){ //Начать после загрузки страницы;
$('#button_id').click(function(){ //Клик по кнопке;
if ($('input[name=q3]').val() == '')
{
//Сообщение об ошибке;
}
if($('input[name=q2_1]').is(':checked')==false) //И так далее (name=q2_2, name=q2_3);
{
//checkbox не отмечен;
}
});
});
</script>

$(function(){
});
тоже самое что и
$(document).ready(function(){
});
ну это так ... мелочи перфекционизма

 

[Indev29]

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

Ну почему сразу говнокод? Чуть JS, сразу говнокод.

 

[mrlasking]

[member=Indev], тут скорее "говнокод" не в смысле ругани на js. Дело в самой логике проверять поля формы if-ами. Геморрой же.

 

[Indev29]

Indev, тут скорее "говнокод" не в смысле ругани на js. Дело в самой логике проверять поля формы if-ами. Геморрой же.

Всегда так делаю :unsure: . Никакого геморроя.

 

[A-F]

Ведь код с if-ами можно упростить и сделать красивее, вот поэтому и говнокод

 

[mrlasking]

[member=Indev], "Всегда так делаю" - это же не аргумент) Можно ведь и шурупы забивать молотком и тесто раскатывать асфальтоукладчиком.

 

[Indev29]

Хорошо, мнение большинства)

 

[brevis]

Хорошо, мнение большинства)

Большинство раньше было уверено, что Земля плоская и стоит на трёх китах.

Дело в самой логике проверять поля формы if-ами. Геморрой же.

Знаешь как это сделать без if'ов? (да ещё и не геморройно?)

 

[mrlasking]

[member=brevis], И ты и мотек уже давали решения вопроса) Статью мотека, я еще в сентябре отплюсовал и пользуюсь)

 

[motek]

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

Ну почему сразу говнокод? Чуть JS, сразу говнокод.

это не Вам, когда начал писать, Вашего сообщения еще не было

 

[frops]

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

[member=brevis], И ты и мотек уже давали решения вопроса) Статью мотека, я еще в сентябре отплюсовал и пользуюсь)

Можно у Вас поинтересоваться. Я пока не особый знаток html5. Если у меня на сайте doctype: XHTML 1.0. Как это помешает мне использовать вариант motek'а ?
И чем это чревато?

 

[motek]

Можно у Вас поинтересоваться. Я пока не особый знаток html5. Если у меня на сайте doctype: XHTML 1.0. Как это помешает мне использовать вариант motek'а ?
И чем это чревато?

это и есть тип документа - html5, чревато неадекватным поведением браузеров

 

[brevis]

А расскажите, как без скриптов делается это

4. Для checkbox'а нужно, чтобы хотя бы один элементы был checked

 

[CamaroSS]

Пока никак.

 

[frops]

Я выбрал пока вариант brewis'а ) Всем большое спасибо )