Django Using setCustomValidity method in form fields clean - django

Question

new to Django and Python here, building my first project.
I´m making a form for registering new user and I´m controlling my fields in a forms.py file
class UserRegisterForm(forms.ModelForm):
password1 = forms.CharField(
label='Contraseña',
required=True,
widget=forms.PasswordInput(
attrs={
# 'placeholder': 'Contraseña',
'class': 'input-group-field',
'oninvalid': "this.setCustomValidity('Ingrese una contraseña')",
'oninput': "setCustomValidity('')"
}
)
)
password2 = forms.CharField(
label='Contraseña',
required=True,
widget=forms.PasswordInput(
attrs={
# 'placeholder': 'Repetir Contraseña',
'class': 'input-group-field',
'oninvalid': "this.setCustomValidity('Repita la contraseña')",
'oninput': "setCustomValidity('')"
}
)
)
class Meta:
"""Meta definition for Userform."""
model = User
fields = (
'user_name',
'full_name',
'phone',
'email',
'role',
'gender',
'date_birth',
)
widgets = {
'user_name': forms.TextInput(
attrs={
# 'placeholder': 'Usuario ...',
'class': 'input-group-field',
'max_length': '20',
'oninvalid': "this.setCustomValidity('Ingrese un nombre de usuario')",
'oninput': "setCustomValidity('')"
}
),
'full_name': forms.TextInput(
attrs={
# 'placeholder': 'Nombres ...',
'class': 'input-group-field',
'max_length': '100',
'oninvalid': "this.setCustomValidity('Ingrese su nombre completo')",
'oninput': "setCustomValidity('')"
}
),
'phone': forms.TextInput(
attrs={
# 'placeholder': 'Teléfono ...',
'class': 'input-group-field',
'max_length': '50',
'oninvalid': "this.setCustomValidity('Ingrese su teléfono')",
'oninput': "setCustomValidity('')"
}
),
'email': forms.EmailInput(
attrs={
# 'placeholder': 'Correo Electronico ...',
'class': 'input-group-field',
'max_length': '100',
'blank': True,
'oninvalid': "this.setCustomValidity('Ingrese un mail válido')",
'oninput': "setCustomValidity('')"
}
),
'role': forms.Select(
attrs={
# 'placeholder': 'Rol ...',
'class': 'input-group-field',
'required': True,
}
),
'gender': forms.Select(
attrs={
# 'placeholder': 'Género ...',
'class': 'input-group-field',
}
),
'date_birth': forms.DateInput(
format='%Y-%m-%d',
attrs={
'type': 'date',
'class': 'input-group-field',
},
),
}
def clean_password2(self):
if self.cleaned_data['password1'] != self.cleaned_data['password2']:
self.add_error('password2', 'Las contraseñas no son iguales')
Everything is working fine showing this kind of "error messages" in my html
So I have a method for clean password2, to check is the same as password 1 (Password confirmation), and I want the error message, to be the same format as the other fields.
Is this possible?
Thanks for your help!
I also attach here my template
{% extends "panel.html" %}
{% load static %}
{% block panel-content %}
<div class="grid-x medium-10">
<h3 class="cell medium-12" style="text-align: center;color: wheat;">Nuevo Usuario</h3>
<div class="cell medium-12">&nbsp </div>
<div class="cell medium-12 grid-x">
<div class="cell medium-2"></div>
<form class="cell medium-8 grid-x" method="POST">{% csrf_token %}
<div class="cell medium-4">
<label>Usuario:</label>
<div class="input-group">
<span class="input-group-label"><i class="fi-torso"></i></span>
{{ form.user_name }}
</div>
</div>
<div class="cell medium-9"></div>
<div class="cell medium-4">
<label>Nombre:</label>
<div class="input-group">
<span class="input-group-label"><i class="fi-book"></i></span>
{{form.full_name}}
</div>
</div>
<div class="cell medium-1"></div>
<div class="cell medium-3">
<label>Género:</label>
<div class="input-group">
<span class="input-group-label"><i class="fi-male-female"></i></span>
{{form.gender}}
</div>
</div>
<div class="cell medium-1"></div>
<div class="cell medium-3">
<label>Fecha de Nacimiento:</label>
<div class="input-group">
<span class="input-group-label"><i class="fi-calendar"></i></span>
{{ form.date_birth }}
</div>
</div>
<div class="cell medium-4">
<label>Email:</label>
<div class="input-group">
<span class="input-group-label"><i class="fi-mail"></i></span>
{{form.email}}
</div>
</div>
<div class="cell medium-1"></div>
<div class="cell medium-3">
<label>Teléfono:</label>
<div class="input-group">
<span class="input-group-label"><i class="fi-telephone"></i></span>
{{form.phone}}
</div>
</div>
<div class="cell medium-4"></div>
<div class="cell medium-4">
<label>Rol:</label>
<div class="input-group">
<span class="input-group-label"><i class="fi-star"></i></span>
{{form.role}}
</div>
</div>
<div class="cell medium-8"></div>
<div class="cell medium-4">
<label>Contraseña:</label>
<div class="input-group">
<span class="input-group-label"><i class="fi-key"></i></span>
{{ form.password1 }}
</div>
</div>
<div class="cell medium-1"></div>
<div class="cell medium-4">
<label>Repetir Contraseña:</label>
<div class="input-group">
<span class="input-group-label"><i class="fi-key"></i></span>
{{ form.password2 }}
</div>
</div>
<!-- {% for error in form.password2.errors %}
<p class="cell" style="color: red;">
{{ error|escape }}
</p>
{% endfor %} -->
<div class="cell medium-3"></div>
<div class="cell medium-2">
<button type="submit" class="cell success button "> <i class="fi-save"></i>&nbsp Guardar</button>
</div>
</form>
<div class="cell medium-2"></div>
</div>
</div>
{% endblock panel-content %}

Answer 1

I think you might be interested in this answer : https://stackoverflow.com/a/54020111/8439435
Basically you would need to write a custom javascript function to check that both password match each other and use setCustomValidity to show a browser error message on validation of the form if passwords are different.