Скажи “нет!” велосипедам

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

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

Во-первых, я бы сразу взял какой-нибудь из JavaScript framework. Решений много, они отличаются по скорости и нужно смотреть в зависимости от проекта – что уже используется. В текущем проекте мы используем prototype и scriptaculous, по той причине, что при помощи JS мы в основном организуем взаимодействие администратора и backend-a, а администратор у нас использует Firefox 3, где Prototype быстрее jQuery. К тому же, мне prototype нравиться еще и потому, что он входит в состав Ruby on Rails, а значит работать с ним в этом фреймворке легко и непринужденно.

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

<!-- Подключаем нужные библиотеки -->
<script src="scriptaculous/lib/prototype.js" type="text/javascript">
</script>
<script src="scriptaculous/src/effects.js" type="text/javascript">
</script>
<script type="text/javascript" src="validation.js">
</script>
...
<form id="test" action="#" method="get">
<!-- Cоздаем поля, которые нужно проверять -->
<input type="radio" name="field6" id="field6-male" value="Male" />
Male<br />
<input type="radio" name="field6" id="field6-female" value="Female" class="validate-one-required" />
Female<br />
<input type="radio" name="field7" id="field7-single" value="Single" />
Single<br />
<input type="radio" name="field7" id="field7-married" value="Married" class="validate-one-required" />
Married<br />
<input type="submit" value="Submit" />
...
<!-- Активируем плагин проверки для формы 'test' -->
<script type="text/javascript">
function formCallback(result, form) {
	window.status = "valiation callback for form '"
                        + form.id + "': result = " + result;
}
var valid = new Validation('test', 
           {immediate : true, onFormValidate : formCallback});
</script>

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