portico: Make backend validation errors similar to frontend.

The backend errors are currently displayed to the right side of the
input field.  This is different from the frontend validation errors
which are displayed at the bottom of the input field (and also looks
really bad). Also frontend validation uses <p> instead of <div> to
display errors so I have changed this also to make both uniform.
This commit is contained in:
Vishnu Ks 2017-06-29 01:05:51 +05:30 committed by Tim Abbott
parent 9461f490c8
commit faf5c0cd2d
1 changed files with 15 additions and 16 deletions

View File

@ -42,14 +42,13 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
<input id="id_full_name" class="required" type="text" name="full_name" <input id="id_full_name" class="required" type="text" name="full_name"
value="{% if full_name %}{{ full_name }}{% elif form.full_name.value() %}{{ form.full_name.value() }}{% endif %}" value="{% if full_name %}{{ full_name }}{% elif form.full_name.value() %}{{ form.full_name.value() }}{% endif %}"
maxlength={{ MAX_NAME_LENGTH }} required /> maxlength={{ MAX_NAME_LENGTH }} required />
<label for="id_full_name" class="inline-block label-title">{{ _('Full name') }}</label>
{% if form.full_name.errors %} {% if form.full_name.errors %}
{% for error in form.full_name.errors %} {% for error in form.full_name.errors %}
<div class="help-inline text-error">{{ error }}</div> <p class="help-inline text-error">{{ error }}</p>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% endif %} {% endif %}
<label for="id_full_name" class="inline-block label-title">{{ _('Full name') }}</label>
<div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" alt="{{ _('Valid') }}" /> <img class="valid" src="/static/images/checkbox-valid.svg" alt="{{ _('Valid') }}" />
</div> </div>
@ -75,9 +74,9 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
</span> </span>
{% endif %} {% endif %}
{% if form.password.errors %} {% if form.password.errors %}
{% for error in form.password.errors %} {% for error in form.password.errors %}
<div class="help-inline text-error">{{ error }}</div> <p class="help-inline text-error">{{ error }}</p>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
<div class="progress" id="pw_strength" title="{{ _('Password strength') }}"> <div class="progress" id="pw_strength" title="{{ _('Password strength') }}">
@ -93,15 +92,15 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
placeholder="Acme" placeholder="Acme"
value="{% if form.realm_name.value() %}{{ form.realm_name.value() }}{% endif %}" value="{% if form.realm_name.value() %}{{ form.realm_name.value() }}{% endif %}"
name="realm_name" maxlength={{ MAX_REALM_NAME_LENGTH }} required /> name="realm_name" maxlength={{ MAX_REALM_NAME_LENGTH }} required />
{% if form.realm_name.errors %}
{% for error in form.realm_name.errors %}
<div class="help-inline text-error">{{ error }}</div>
{% endfor %}
{% endif %}
<div class="required"></div> <div class="required"></div>
<img class="valid" src="/static/images/checkbox-valid.svg" alt="{{ _('Valid') }}" /> <img class="valid" src="/static/images/checkbox-valid.svg" alt="{{ _('Valid') }}" />
</div> </div>
<label for="id_team_name" class="inline-block label-title">{{ _('Organization name') }}</label> <label for="id_team_name" class="inline-block label-title">{{ _('Organization name') }}</label>
{% if form.realm_name.errors %}
{% for error in form.realm_name.errors %}
<p class="help-inline text-error">{{ error }}</p>
{% endfor %}
{% endif %}
<div class="help-box margin-top"> <div class="help-box margin-top">
{{ _('This can be changed later on the settings page.') }} {{ _('This can be changed later on the settings page.') }}
@ -128,11 +127,11 @@ Form is validated both client-side using jquery-validate (see signup.js) and ser
{% if realms_have_subdomains %} {% if realms_have_subdomains %}
<div class="inline-block external-host"> .{{ external_host }}</div> <div class="inline-block external-host"> .{{ external_host }}</div>
{% endif %} {% endif %}
{% if form.realm_subdomain.errors %} {% if form.realm_subdomain.errors %}
{% for error in form.realm_subdomain.errors %} {% for error in form.realm_subdomain.errors %}
<div class="help-inline text-error">{{ error }}</div> <p class="help-inline text-error">{{ error }}</p>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
</div> </div>
<div class="help-box margin-top"> <div class="help-box margin-top">
{% if realms_have_subdomains %} {% if realms_have_subdomains %}