How to change the validation error color and position in Django?-CodePudding

I am new to Django. I am trying to make a simple form to match the password. However, when I enter different passwords and press the Save button I get a black validation error above the form. I want to change the error color and position to appear in red color beside or below the control.

Here newuser.html:

{% block content %}
<form method="POST">
{% csrf_token %}
    <table>
        {{frmNewUser.as_table}}
        {% for error in frmNewUser.password.errors %} {% comment %} I tried frmNewUser.non_field_errors too {% endcomment %}
            <p>{{error}}</p>
        {% endfor %}
    </table>
    <input type="submit" name="Save" value="Save" colspan=2>
</form>
{% endblock content %}

Here forms.py:

class NewUserFrom(forms.Form):
    username = forms.CharField(max_length=50, widget=forms.TextInput)
    password = forms.CharField(widget=forms.PasswordInput)
    confirm_password = forms.CharField(label="Confirm password", widget=forms.PasswordInput)
    name = forms.CharField(max_length=50, widget=forms.TextInput)
    email = forms.EmailField(max_length=50, widget=forms.EmailInput)

    def clean(self):
        cleaned_data = super().clean()
        pwd = cleaned_data.get('password')
        cof_pwd = cleaned_data.get('confirm_password')
        if pwd and cof_pwd:
            if pwd != cof_pwd:
                raise forms.ValidationError('Password is not match.')
        return super().clean()

Here views.py:

from django.shortcuts import render
from django.http import HttpResponse, request
from django.db import connection
from django.contrib.auth.decorators import login_required
import pyodbc
from .forms import NewUserFrom

def newUser(request):    
    form = NewUserFrom(request.POST)
         if not form.is_valid():
              context = {'frmNewUser':from}
              return render(request,'login/newuser.html', context)
         return render(request, "login/welcome.html")

CodePudding user response：

You can change validation error color by doing something like this in your form:


{% block content %}
<form method="POST">
{% csrf_token %}
    <table>
        {{frmNewUser.as_table}}
        {% for error in frmNewUser.password.errors %} {% comment %} I tried frmNewUser.non_field_errors too {% endcomment %}
            <p  style="color: red">{{error}}</p>
        {% endfor %}
    </table>
    <input type="submit" name="Save" value="Save" colspan=2>
</form>
{% endblock content %}

CodePudding user response：

You are writing out the whole template in html so you can simply add an inline css like so:

<p style="color: red;"> {{ error }} <p>

So when the error message is showed it will render directly in red.

If you are new and you want to add a cool style with a low difficulty bar you should try out bootstrap. They have very simple solutions to add professional-looking validation.

---- UPDATE ----

Try this:

{% for field in frmNewUser.fields %}
    {{ field }}
    {% if field.errors %}
        {% for error in field.errors %}
            <p style="color: red;"> {{ error }} <p>
        {% endfor %}
    {% endif %}
{% endfor %}

I think they recently updated the docs on this subject because they are surprisingly clear, or maybe i was just a big noob the last time i went over there ;P Anyway, do check them out as i think they can provide additional clarity.