C3L/C3L-Membership-Online-Form Changeset - fb1d961de1c9 · Chaos Computer Club Lëtzebuerg Projects

Changeset - fb1d961de1c9

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

Dennis Fink - 3 years ago 2022-01-18 18:13:32
dennis.fink@c3l.lu

Stylize errors better in index.html

2 files changed with 25 insertions and 10 deletions:

c3l_membership/static/style.css

c3l_membership/templates/index.html

0 comments (0 inline, 0 general)

c3l_membership/static/style.css

➞

Show inline comments

@@ @@ -16,6 +16,21 @@ p { @@
+}
 .pure-menu-horizontal {
   text-align: right;
   padding-bottom: 1rem;
+}
 .form-error {
   background: #f98691;
   border: 1px solid #dc3545;
   border-radius: 4px;
   padding: 0.5em 0.6em;
   font-weight: 550;
   color: #3d0309;
+}
 .field-error {
   background: #f98691;
   border: 1px solid #dc3545;
   color: #3d0309;
+}

c3l_membership/templates/index.html

➞

Show inline comments

@@ @@ -40,36 +40,36 @@ @@
         <h1>{% trans %}Membership Application{% endtrans %}</h1>
         <h2>{% trans %}How to use this form{% endtrans %}</h2>
         <p>{% trans %}Fill out this form and click on "Become a member". Afterwards you will be presented with a PDF, which you have to send to info@c3l.lu or bring it to one of our next events. Print it or save it to your local hardware, because we don't save a copy on our servers for data protection reasons!{% endtrans %}</p>
         {% if form.errors %}
           {% for fieldname, errors in form.errors.items() %}
             {% for error in errors %}
               <p>{{ fieldname }} - {{ error }}</p>
+              <p class="form-error">{{ fieldname }} - {{ error }}</p>
             {% endfor %}
           {% endfor %}
         {% endif %}
         <form class="pure-form pure-form-stacked" method="POST" action="{{ url_for('root.index', lang_code=g.lang_code) }}">
           <fieldset>
             {{ form.hidden_tag() }}
             <legend>{% trans %}Required information{% endtrans %}</legend>
             <div class="pure-g">
               <div class="pure-u-1-1">
                 <b>{{ form.username.label }}</b>
                 {{ form.username(required=True, class="pure-u-1-1") }}
+                {{ form.username(required=True, class="pure-u-1-1 field-error" if form.username.errors else "pure-u-1-1") }}
               </div>
             </div>
             <div class="pure-g">
               <div class="pure-u-1-1">
                 <b>{{ form.email.label }}</b>
                 {{ form.email(required=True, class="pure-u-1-1") }}
+                {{ form.email(required=True, class="pure-u-1-1 field-error" if form.email.errors else "pure-u-1-1") }}
               </div>
             </div>
             <div class="pure-g">
               <div class="pure-u-1-1">
                 <b>{{ form.fullname.label }}</b>
                 {{ form.fullname(required=True, class="pure-u-1-1") }}
+                {{ form.fullname(required=True, class="pure-u-1-1 field-error" if form.fullname.errors else "pure-u-1-1") }}
               </div>
             </div>
             <div class="pure-g">
               <div class="pure-u-1-1">
                 <b>{{ form.membership.label }}</b>
                 {% for option in form.membership %}
@@ @@ -120,43 +120,43 @@ @@
                   </div>
                 </div>
                 <legend>{% trans %}Additional information{% endtrans %}</legend>
                 <div class="pure-g">
                   <div class="pure-u-1-1">
                     <b>{{ form.birthday.label }}</b>
                     {{ form.birthday(class="pure-u-1-1") }}
+                    {{ form.birthday(class="pure-u-1-1 field-error" if form.birthday.errors else "pure-u-1-1") }}
                   </div>
                 </div>
                 <div class="pure-g">
                   <div class="pure-u-1-1">
                     <b>{{ form.street.label }}</b>
                     {{ form.street(class="pure-u-1-1") }}
+                    {{ form.street(class="pure-u-1-1 field-error" if form.street.errors else "pure-u-1-1") }}
                   </div>
                 </div>
                 <div class="pure-g">
                   <div class="pure-u-1-1">
                     <b>{{ form.zip.label }}</b>
                     {{ form.zip(class="pure-u-1-1") }}
+                    {{ form.zip(class="pure-u-1-1 field-error" if form.zip.errors else "pure-u-1-1") }}
                   </div>
                 </div>
                 <div class="pure-g">
                   <div class="pure-u-1-1">
                     <b>{{ form.city.label }}</b>
                     {{ form.city(class="pure-u-1-1") }}
+                    {{ form.city(class="pure-u-1-1 field-error" if form.city.errors else "pure-u-1-1") }}
                   </div>
                 </div>
                 <div class="pure-g">
                   <div class="pure-u-1-1">
                     <b>{{ form.state.label }}</b>
                     {{ form.state(class="pure-u-1-1") }}
+                    {{ form.state(class="pure-u-1-1 field-error" if form.state.errors else "pure-u-1-1") }}
                   </div>
                 </div>
                 <div class="pure-g">
                   <div class="pure-u-1-1">
                     <b>{{ form.country.label }}</b>
                     {{ form.country(class="pure-u-1-1") }}
+                    {{ form.country(class="pure-u-1-1 field-error" if form.country.errors else "pure-u-1-1") }}
                   </div>
                 </div>
                 <legend></legend>
                 <label for="{{ form.minor_member.id }}" class="pure-checkbox">
                   {{ form.minor_member }} {{ form.minor_member.label.text|safe}}
                 </label>

0 comments (0 inline, 0 general)