DjangoBB LoFi version

Полная версия: "Динамическое" изменение стиля полей формы.

Начало » Django » "Динамическое" изменение стиля полей формы.

Galaxy

Ноя. 20, 2009 16:11:26

Не так давно использую Джанго, но все-таки пишу сейчас свой портал на данном фреймворке. В процессе работы возник вопрос (наверное безумно глупый), на который я не смог найти ответ в мануалах на портале джанги (официальном).
Суть - у меня есть форма связанная с базой. Понятное дело, что для красивого вывода дешевых form.as_table и т.д. не хватает. Соответсвенно кастомизировал вывод формы как form.name_of_form_field

<tr>
<td>First name:</td><td>{{ form.first_name }}</td><td align="left">{% if form.first_name.errors %}<font color="#8c0808" size="2">Please, write first name</font>{% endif %}</td>
</tr>

Но мне так же необходимо чтобы при возникновении ошибки менялся стиль самого поля (а именно его цвет).
Собственно вопрос, как это сделать?если ли метод у form который это делает.

Есть тема с виджетами

name = forms.CharField(
                widget=forms.TextInput(attrs={'class':'special'}))

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

class CalendarWidget(forms.TextInput):
    class Media:
        css = {
            'all': ('pretty.css',)
        }

Но опять ж это класс, что приводит к огромному количеству кода. Огромная просьба помочь.

Galaxy

Ноя. 21, 2009 01:49:47

Ну прям никто не знает? Даже Александр Кошелев?

Александр Кошелев

Ноя. 21, 2009 02:35:20

Galaxy
Ну прям никто не знает? Даже Александр Кошелев?

Что значит “даже”?:-)

Я не очень понимаю, почему вы зациклились на добавлении класса к самому полю. Что вам мешает добавить нужный класс к контейнеру поля (в вашем случае <td>) и в css прописать правила для инпутов внутри него?

PS: И не надо писать мне в блог комментарий, совершенно в посторонний пост, задавая этот вопрос:-)

sairus

Ноя. 21, 2009 10:46:14

Наиболее простой вариант, изменить tr

<tr{% if form.first_name.errors %} class="error-field"{% endif %}>
<td>First name:</td>
<td>{{ form.first_name }}</td>
<td align="left">{% if form.first_name.errors %}<font color="#8c0808" size="2">Please, write first name</font>{% endif %}</td>
</tr>

а в css

tr.error-field td {background-color:red;}

и еще, вместо First name: лучше использовать {{ form.first_name.label }}, в python коде добавить

name = forms.CharField(
                label = u"First name",
                widget=forms.TextInput(attrs={'class':'special'}))

Galaxy

Ноя. 22, 2009 18:15:56

Daevaorn
Galaxy
Ну прям никто не знает? Даже Александр Кошелев?
Что значит “даже”?:-)

Я не очень понимаю, почему вы зациклились на добавлении класса к самому полю. Что вам мешает добавить нужный класс к контейнеру поля (в вашем случае <td>) и в css прописать правила для инпутов внутри него?

PS: И не надо писать мне в блог комментарий, совершенно в посторонний пост, задавая этот вопрос:-)

Ну извините. У вас кстати сайт глючит.) Ну потому, что CSS я знаю и мне интересно возможности Джанги. Вот и хотел узнать умеет ли она получать это просто. Я так понял что все-таки нет. Просто логично было, если как в javascript было: form.field_name.style()…

Naota

Ноя. 23, 2009 09:59:24

В шаблоне можно вывести отдельное поле, сформированное методом as_table?
Что бы не писать такое:

<tr><td colspan="2" class="error">{{ form.title.errors }}</td></tr>
    <tr><th>{{ form.title.label_tag }}</th><td>{{ form.title }}</td></tr>

а просто:

{{ form.title.as_table }}

Galaxy

Ноя. 23, 2009 11:46:02

Naota
В шаблоне можно вывести отдельное поле, сформированное методом as_table?
Что бы не писать такое:
<tr><td colspan="2" class="error">{{ form.title.errors }}</td></tr>
    <tr><th>{{ form.title.label_tag }}</th><td>{{ form.title }}</td></tr>
а просто:
{{ form.title.as_table }}

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

Naota

Ноя. 23, 2009 12:31:55

Galaxy эти два способа придумали не просто так, as_table лучше подойдет для центрированных форм, а as_p для не центрированных. Но вопрос то не в этом.