Как изменить цвет и положение ошибки валидации в Django?

Я новичок в Django. Я пытаюсь сделать простую форму для подбора пароля. Однако, когда я ввожу разные пароли и нажимаю кнопку Save, я получаю черную ошибку валидации над формой. Я хочу изменить цвет и положение ошибки, чтобы она отображалась красным цветом рядом или под элементом управления.

Здесь 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 %}

Здесь 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()

Здесь 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")

Вы можете изменить цвет ошибки валидации, сделав в своей форме примерно следующее:


{% 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 %}

Вы пишете весь шаблон в html, поэтому вы можете просто добавить inline css, например, так:

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

Таким образом, при появлении сообщения об ошибке оно будет отображаться красным цветом.

Если вы новичок и хотите добавить классный стиль с низкой планкой сложности, вам стоит попробовать bootstrap. У них есть очень простые решения для добавления профессионально выглядящей валидации. Пример ниже:

Я столкнулся с похожей проблемой, но я использовал метку ввода, и то, что я сделал, это изменил метку на ошибку и в красном цвете.

Для newuser.html мы можем итерировать каждый элемент в таблице. Если есть ошибка, то меткой будет ошибка без html-тегов. И мы можем сделать ее красной в html или css. Ваш выбор.

{% block content %}
<form method="POST">
{% csrf_token %}
    <table>
        {% for field in frmNewUser %}
            {% if field.errors %}
                <label class="form-label-error" for="{{ field.auto_id }}" style="color:red">
                    {{ field.errors|striptags }}
                </label>
            {% else %}
                <label class="form-label" for="{{ field.auto_id }}">
                    {{ field.label }}
                </label>
            {% endif %}
       {% endfor %}
    </table>
    <input type="submit" name="Save" value="Save" colspan=2>
</form>
{% endblock content %}

Однако это изменит метку до тех пор, пока вы не отправите форму снова. Это не очень "интерактивно". Для моей ситуации я обработал изменение цвета и сообщение (ошибка или ок) с помощью javascript, пока пользователь заполняет форму.

Для этого вы можете добавить class и onkeypress к элементам в файле forms.py, чтобы впоследствии вы могли их настроить.

password = forms.CharField(
                    label='Your Password',
                    required=False,
                    widget=forms.PasswordInput(
                        attrs={
                            'onkeypress': 'password_validation(this)',
                            'class': 'pass_input',
                        }
                    )
                )

Надеюсь, это имеет смысл!

Вернуться на верх