Hello! I am new to django, so I apologize in advance if my question is a bit basic.
I’m building my first website with django and I’m facing a problem I haven’t been able to figure out for the past 3 months.
I have a page with a form for users to input their first name, last name and email. I have declared in the “forms.py” file that a class named “error” should be added to the widgets of the fields that don’t pass the validation. Then, in my CSS file, I define some rules to style those fields, giving them a red border.
The problem is that, when you input invalid data into the field for the last name and try to submit the form, both the fields for the last name and the first name get marked with the error class. Strangely, this doesn’t happen when you input wrong information into the first name field (the last name field doesn’t get marked as wrong in that case, just the first name).
Here I show the relevant parts of my HTML, models.py, forms.py and CSS files to see if you can find what it is that I’m doing wrong. Note: the form fields for the first name and last name are called, respectively, “nombre” and “apellido”. Sorry, but I’, coding it in spanish:
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.nombre}}
</div>
<div class="input_field">
{{form.apellido}}
</div>
<div class="input_field">
{{form.email}}
</div>
<button type="submit" class="btn btn-primary" id="btn_guardar">Guardar</button>
</div>
</div>
</form>
models.py:
from django.db import models
class Turno(models.Model):
nombre = models.CharField(max_length=50)
apellido = models.CharField(max_length=50)
email = models.EmailField(max_length=30)
forms.py:
class TurnoForm(forms.ModelForm):
class Meta:
model = Turno
fields = ['nombre', 'apellido', 'email']
widgets = {
"nombre": forms.TextInput(attrs={"class": "form-control", "name": "nombre"}),
"apellido": forms.TextInput(attrs={"class": "form-control", "name": "apellido"}),
"email": forms.EmailInput(attrs={"class": "form-control", "name": "email"}),
}
def clean_nombre(self):
nombre = self.cleaned_data["nombre"]
if not nombre.isalpha():
self.fields["nombre"].widget.attrs["class"] += " error"
raise forms.ValidationError("Por favor, ingrese solo caracteres alfabéticos", code="carac_esp")
return nombre
def clean_apellido(self):
"""
El fallo está en este campo. Al completarlo erróneamente se marca también el campo de "nombre" como incorrecto.
"""
apellido = self.cleaned_data["apellido"]
if not apellido.isalpha():
self.fields["apellido"].widget.attrs["class"] += " error"
raise forms.ValidationError("Por favor, ingrese solo caracteres alfabéticos", code="carac_esp")
return apellido
def clean_email(self):
email = self.cleaned_data["email"]
dominios_permitidos = ['gmail.com', 'hotmail.com', 'yahoo.com']
if not any(email.endswith(dominio) for dominio in dominios_permitidos):
self.fields["email"].widget.attrs["class"] += " error"
raise forms.ValidationError("Por favor, ingrese una dirección de e-mail válida", code="email_invalido")
return email
CSS:
.error {
border: 2px solid red;
background-color: #ffe6e6; /* O cualquier otro estilo que desees */
}
Could someone please give me a hand? I’m really lost.