Django: div class alert alert-danger does not work properly

Viewed 98

My forms.py:

class SignUpForm(forms.ModelForm):
    name = forms.CharField(label="name", required=True, widget=forms.TextInput())

    email = forms.CharField(label="email", required=True, widget=forms.TextInput())

    password = forms.CharField(label="password", widget=forms.PasswordInput(), required=True)

    confirm_password = forms.CharField(label="password", widget=forms.PasswordInput(), required=True)

    def clean(self):
        cleaned_data = super(SignUpForm, self).clean()
        password = cleaned_data.get("password")
        confirm_password = cleaned_data.get("confirm_password")
        if password != confirm_password:
            self.add_error('confirm_password', "Password and confirm password do not match")
        return cleaned_data

    class Meta:
        model = get_user_model()
        fields = ('name', 'email', 'password')

My html file:

{% block content %}
<form method="post">
  <div class="sign-card">
    <h3>Signup</h3>
    {% csrf_token %}
    <div class="input-div">
      <label for="{{ form.name.id_for_label }}">Username:</label>
      {{ form.name }}
    </div>
    <div class="input-div">
      <label for="{{ form.email.id_for_label }}">Email:</label>
      {{ form.email }}
    </div>
    <div class="input-div">
      <label for="{{ form.password.id_for_label }}">Password:</label>
      {{ form.password }}
    </div>
    <div class="input-div">
      <label for="{{ form.password.id_for_label }}">Confirm Password:</label>
      {{ form.confirm_password }}
    </div>
    {% if form.errors %}
       {% for field in form %}
           {% for error in field.errors %}
              <div class="alert alert-danger">
                   <strong>{{ error|escape }}</strong>
              </div>
           {% endfor %}
       {% endfor %}
    {% endif %}

    <button type="submit" class="btn">Sign up</button>
    <p>Already have account? <a href="{% url 'login' %}">Log In</a></p>
  </div>
</form>
{% endblock %}

My views.py:

def signup(request):
    if request.method == 'POST':
        form = SignUpForm(request.POST)
        if form.is_valid():
            form.save()
            username = form.cleaned_data.get('name')
            password = form.cleaned_data.get('password')
            email = form.cleaned_data.get('email')
            user = authenticate(username=username, password=password, email=email)
            login(request, user)
            return redirect('index')
    else:
        form = SignUpForm()
    return render(request, 'registration/signup.html', {'form': form})

The problem I'm facing is that <div class="alert alert-danger"> doesn't work properly. It prints the text and makes it bold, but I have no CSS styling for it (like here, for example: https://www.csestack.org/display-messages-form-submit-django/). I don't want to use Django messages, neither change my code in views.py. How can I fix it? If there is no way to fix it without this changes, so, how can I fix the problem fixing my views.py?

Thanks a lot for your answers.

1 Answers

Actually, you are missing the css file to interpret the alert-danger class.

You can either manually write css for it or include some css library like bootstrap.

You can do something like below in your code: In <head> tag

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>

It should work fine then.

Related