Django 表单字段样式出错时出现问题

Question

我正在使用 Django 构建我的第一个网站，我遇到了一个我认为非常奇怪的问题。我的页面中有一个表单，我希望如果用户在其中一个字段中输入无效数据，则该字段会使用特定的 CSS 样式进行标记。我所做的是编写一个验证方法（“clean()”方法）来检查用户提供的输入。如果未通过验证，则“错误”类将添加到该输入的小部件中。然后，使用 CSS，我为 .error 类提供一些特定的样式。

问题在于：错误样式未正确应用于表单的“姓名”、“姓氏”和“电子邮件”字段。例如，当您输入无效的姓氏时，“姓氏”和“姓名”字段都会以红色突出显示，而当您输入无效的电子邮件地址时，“电子邮件”和“姓名”字段都会突出显示。

我已经检查了“forms.py”文件一千遍，但我无法弄清楚出了什么问题。

这是“forms.py”文件的代码：

from django import forms
from .models import Appointment

class AppointmentForm(forms.ModelForm):
        
class Meta:
    model = Appointment
    fields = ['name', 'last_name', 'email', 'date', 'time']
    widgets = {
        "name": forms.TextInput(attrs={"class": "form-control"}),
        "last_name": forms.TextInput(attrs={"class": "form-control"}),
        "email": forms.EmailInput(attrs={"class": "form-control"}),
    }
            
def clean_name(self):
    name = self.cleaned_data["name"]

    if not name.isalpha():
        self.fields['name'].widget.attrs['class'] += ' error'
        raise forms.ValidationError("Please, input only letters", code="carac_esp")
        
    
    return name

def clean_last_name(self):
    last_name = self.cleaned_data["last_name"]

    if not last_name.isalpha():
        self.fields['last_name'].widget.attrs['class'] += ' error'
        raise forms.ValidationError("Please, input only letters", code="carac_esp")
    
    return last_name

def clean_email(self):
    email = self.cleaned_data["email"]
    allowed_domains = ['gmail.com', 'hotmail.com', 'yahoo.com']

    if not any(email.endswith(domain) for domain in allowed_domains):
        self.fields['email'].widget.attrs['class'] += ' error'
        raise forms.ValidationError("Please, input a valid email address", code="email_invalid")
    
    return email

为了查看 HTML 是否有问题，这里是声明表单的代码部分：

<form method="post" id="form_turnos">
    <div class="form-group">
        {% csrf_token %}
        
        {{ form.non_field_errors }}
        
        
        <div class="input_group">
                                        
            <div class="input_field">
                {{ form.name}}
            </div>
            
            <div class="input_field">
                {{ form.last_name}}
            </div>
                                        
            
            <div class="input_field">
                {{ form.email }}
            </div>
                                                
            
            <div class="input_field">
                <input type="text" class="form-control" name="date" id="id_date" placeholder="Date" readonly>
            </div>

            <div class="input_field">
                <input type="text" class="form-control" name="time" id="id_time" placeholder="Time" readonly>
            </div>

            <button type="submit" class="btn btn-primary" id="btn_save">Save</button>

        </div>

    </div>
</form>

以及用于设置无效字段样式的 CSS 错误类：

.error{
    background-color: lightcoral;
}

Answer 1

是的，我也认为这是一个好问题，我对这个问题感到困惑