There seems to be an issue with the functionality of the Django's div class alert alert-danger feature

Here is my custom code for handling user sign-up in Django:

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="confirm_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')

This is how I have structured the signup form in 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.confirm_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 an account? <a href="{% url 'login' %}">Log In</a></p>
  </div>
</form>
{% endblock %}

My view function for processing the signup form submission looks like this:

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})

I am currently facing an issue with styling the error messages in my HTML without using CSS. I don't want to use Django messages or modify my views.py. Can anyone suggest a solution to style the error messages appropriately within the existing setup?

Thank you for your help.

Answer №1

It appears that the issue is due to a missing CSS file needed to interpret the alert-danger class.

To resolve this, you have two options: manually write the CSS code for it or include a CSS library like Bootstrap.

You can implement the following code snippet in your HTML: Inside the <head> tag

<head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcded3d3c8cfc8ceddccfc89928d928d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>

By following these steps, the issue should be resolved.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering surprising results while employing lxml for HTML parsing

When I use lxml to parse the following HTML, I am encountering some unexpected behavior. Below is my Python 3 code snippet: from lxml import etree, html s = """ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3. ...

Prevent Cordova from shrinking the view when focusing on an input

Currently working on developing an app using Cordova/Phonegap (v6.5.0). Platforms where I've installed the app: - IOS (issue identified) - Android (issue identified) - Browser (no issue found) I am facing a known problem without a suitabl ...

Using the ico-moon icon in an HTML email for various email clients such as Outlook and Gmail

I would greatly appreciate it if someone could provide instructions on how to incorporate ico-moon icons into an email HTML, ensuring they can be properly displayed in various email clients such as Outlook and Gmail. ...

The table spills over the container and disappears underneath the navbar

After downloading a template table from the internet and customizing it to my liking, I encountered an issue where it does not adhere to the assigned settings (as shown in the image), but that's not the only problem. The dropdown navbar on my website ...

Issues with Collision Detection between Canvas Rectangles and Balls

I am developing an HTML5 canvas game and encountering an issue with collision detection. The problem occurs when the ball collides with any platform - the ball's gravity should change to -1 and move upwards at the same velocity as the platforms. Howev ...

What is the best way to adjust the dimensions of an element so that it only fills the size of the initial window or

I need help keeping a specific element at the initial 100% height of the viewport, without it resizing when the user changes their window size. Should I use JavaScript to determine the initial viewport height and then pass those dimensions to the CSS? Can ...

The 8 x 8 grid I am constructing is functional, however, the issue lies in the fact that the first line only begins with a single # symbol

I am attempting to create an 8 x 8 grid. It's coming together, but the issue is that the first line only starts with one # sign. function print(msg) { console.log(msg); return msg; } let result = ""; for(let i=1; i<=8; i++) { result += ...

Accessing Flask from various devices

Is there a way to access a Flask web-app from different devices instead of just locally on http://127.0.0.1:5000/? I want to be able to generate a specific IP address or make the site accessible from other devices. If anyone knows how to achieve this, pl ...

Unable to Save Field Data in Django AbstractUser Model

Even though I have a model object that extends the User Object with AbstractUser to add fields, I am facing difficulties saving data to those fields through an HTML form. Strangely, while attempting to save in the shell, I encounter issues specifically whe ...

Setting a div's background using JavaScript works flawlessly on jsfiddle.net, but encounters issues when implemented in actual code

contains the files you need. For reference, here is the link to the code on I have attempted to remove all unnecessary elements from the actual project, but it has not made a difference. document.getElementById("image").style.backgroundImage = "url(" + d ...

Combining Angular Material with another CSS framework

I'm diving into my first Angular project and contemplating incorporating Angular Material. It offers an abundance of components, which aligns with my project needs. However, I've noticed a lack of grid system and utility classes within Angular Ma ...

Selecting a language by clicking on it

I recently designed a bootstrap navigation bar for my website and incorporated a language selection dropdown menu into it. <li class="nav-item dropdown"> <a class="nav-link dropright" href="#" id="navbarDropdown" role="button" data-toggle="dr ...

Arrangement featuring two distinct types of tiles

Looking for a way to achieve this layout using just CSS or a combination of CSS and a little JS. Click on my avatar to see the reference image enlarged =) I've tried using floats and display options but haven't been successful. Take a look at htt ...

Adaptable background images with CSS styling

I'm attempting to adjust the sizing of my background image on the splash page to make it smaller. My goal is for the image to fill the entire section regardless of screen size. .splash{ background-image: url("../images/lanternboys_medium.jpg"); backg ...

List of prices with a dotted line separating the price and product, adjusting its width based on

I am attempting to create a price list with a dotted underline between the price and product that adjusts dynamically in width. Here is my code snippet: https://jsfiddle.net/romariokbn/2gm27rv6/ <ul class="how-can-i-do"> <li> <span ...

Ordering styles in Material UI

I've spent countless hours customizing this element to perfection, but the more I work on it, the more of a headache it gives me. The element in question is an outlined TextField, and my focus has been on styling its label and border. Initially, I th ...

Is it possible to reference the same PHP file in multiple locations?

Currently, I am working on a web development project where I have created a header.html file to store the common header for all my webpages. This header file is located in the parent directory. Within my header.html file, I have included references to bot ...

Unchecking and checking the radio button is necessary in order for it to function properly

Today, I'm puzzled by the odd behavior of my radio buttons in a pixel drawer project. In order for the radio button to function properly, I have to uncheck it and then recheck it. The pixel drawer allows me to change colors and sizes using these radio ...

Tips for passing a page as an argument in the function parameter of the page.evaluate() method?

I keep running into this issue when I pass the page as an argument: TypeError: Converting circular structure to JSON --> commencing at object with constructor 'BrowserContext' | property '_browser' -> object with const ...

Is there a way to use ajax to dynamically monitor the presence of a file in real-time?

Is there a way to automatically observe the status of a file using ajax without having to manually refresh it with a button? ...