Как предотвратить скрытие Modal при отправке, если в форме есть ошибка?

когда я нажимаю кнопку Добавить пользователя, модальная форма скрывается, даже если в форме есть ошибки. Если я снова открываю модальную форму, сообщения об ошибках остаются там, мне нужно показать сообщения об ошибках и не закрывать модальную форму, если есть сообщение об ошибке.

Я думаю, что могу использовать {{form.errors}} для проверки наличия сообщения об ошибке. Но я не знаю как?

<div class="card-body d-flex justify-content-between">
    <h4 class="box-title">Users</h4>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#add_user" data-whatever="" >Add a user</button>

    <div class="modal fade" id="add_user" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h1 class="h3 mb-3 fw-normal text-center" id="exampleModalLabel">Create Account</h1>
        </div>
        <div class="modal-body">
            <form action="" method="POST">
                {% csrf_token %}
        
                <div class="form-floating">
                    {{ form.username }}
                    <span class="text-danger">{{ form.errors.username }}</span>
                </div>
                <div class="form-floating">
                    {{ form.email }}
                    <span class="text-danger">{{ form.errors.email }}</span>
                </div>
                <div class="form-floating">
                    {{ form.password1 }}
                    <span class="text-danger">{{ form.errors.password1 }}</span>
                </div>
                <div class="form-floating">
                    {{ form.password2 }}
                    <span class="text-danger ">{{ form.errors.password2 }}</span>
                </div>
            
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button class=" btn btn-primary" type="submit" >Add User</button>
        </div>
        </div>
    </form>
    </div>
    </div>
</div>

Я использовал форму Django для валидации и сообщений об ошибках.

from django import forms
from django.contrib.auth.forms import UserCreationForm
from django.contrib.auth.models import User

class CustomUserCreationForm(UserCreationForm):
    class Meta:
        model = User
        fields = ['username', 'email', 'password1', 'password2'] 

    username = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Username','class': 'form-control mb-3',}))
    email = forms.CharField(widget=forms.EmailInput(attrs={'placeholder': 'Email','class': 'form-control mb-3',}))
    password1 = forms.CharField(widget=forms.PasswordInput(attrs={'placeholder': 'Password','class': 'form-control mb-3',}))
    password2 = forms.CharField(widget=forms.PasswordInput(attrs={'placeholder': 'Confirm Password','class': 'form-control mb-3',}))

моя функция в файле views.py выглядит следующим образом

@login_required(login_url= 'login')
@staff_member_required(login_url='home')
def dashboard(request):
    User = get_user_model()
    users = User.objects.all()
    form = CustomUserCreationForm()
    if request.method == 'POST':
        form = CustomUserCreationForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('dashboard')
    context = {
        'users' : users,
        'form': form
    }
    return render(request, 'dashboard.html', context)

есть ли какие-либо решения для этого?

<div class="modal fade {% if form.errors %}show{% endif %}" ...>