Django Using setCustomValidity method in form fields clean

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.