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>

这让我上个月都快疯了。请有人帮忙！

Answer 1

抱歉。当我将其翻译成英语以发布帖子时，我用连字符更改了下划线。我再编辑一下。