Скрипт по смене стиля в зависимости от содержимого тега

[Smic]

Ребята, срочно требуется ваша помощь. Я недавно только начал заниматься скриптами, и многое для меня ещё незнакомо. А задача встала, котороя требует решения. Если есть возможность помогите со скриптом и, если возможно, с описанием комментариев, чтобы понять почему скрипт такой какой есть, и что откуда взялось.. Если есть решение на jQuery - это будет очень здорово..

Есть такой код.

<form action="" method="post" name="form_name" id="form_name">
<label for="name">Никнейм:
<div style=" background-color:#F00; height:20px" class="d1">
<span style="line-height:20px; color:#FFF"></span>
</div>
</label>
<br>
<input name="name" id="name" type="text" size="30" value=''>
</form>

Изначально див с классом d1 имеет стиль display:none. Когда в поле вносится информация, то, если она неправильна, внутри span появляется текст с описанием ошибки (этот скрипт из интернета есть).
В этот момент, когда в спане length > 2 див с классом d1 должен поменять стиль на display:block

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

Заранее, спасибо!

[Маэстро]

В том виде, в котором Вы изложили свой пример - это не javascript. Это HTML. В большинстве случаев содержимое формы (в т.ч. поля INPUT) отправляется на сервер, проверяется на сервере на корректность введенных данных и отправляется обратно уже измененный html-код формы, в т.ч. с сообщением об ошибке выделенным цветом. При формировании этого кода на сервере класс "d1" (с display:none) подменяется на "d2" (с display:block), а в <span> вставляется текст ошибки. Это называется с перезагрузкой страницы.

Если же Вы хотите всё это делать без перезагрузки страницы, если Вы хотите делать проверку корректности введенных данных прямо на клиентской стороне (без отправки данных на сервер), то необходимо:
1. написать JavaScript создания (create) Вашей формы и навесить обработчики событий на отправку формы (submit), либо на событие нажатия клавиш INPUT (onkeydown).
2. если принципиально надо оставить html-код формы, то сначала снабдите необходимые теги формы корректными идентификаторами, например,

<div id="mama">.....</div>...<span id="papa">.....</span>

Затем, используя document.getElementById("mama") найти на форме необходимые элементы и в javascript опять же навесить на них функции (смены класса, проверки ввода и т.д.)
примечание: не используйте в качестве идентификатора слово "name" - будут проблемы...
3. Выбрать способ который будет отправлять данные на сервер. Например, можно использовать XMLHttpRequest, в котором на событие onreadystatechange повесить функцию, которая наконец изменит класс необходимого DIV_a, т.е. сделает это:

document.getElementById("mama").className = "d2";

Вот и все "семечки".

[рони]

Smic,Можно функцию которая добавляет текст в спан, дополнить, чтоб она и делала ещё этот спан видимым.

[Маэстро]

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

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