[FIXED] Error won't showing up, Form validation with Django

Issue

I just started learning Django for my new Forum project, I'm trying to find it out myself but this problem has been bothering me since 2 days. I am trying to make a registration validation for my form, I am using messages.error(request, "Text") to make an error appear on screen, but it doesn't work, and just shows nothing.

Here is a part of my HTML code:

    <div class="limiter">
        <div class="container-login100" style="background:black;">
            <div class="wrap-login100">
                <form class="login100-form validate-form"  method='POST' action="{% url 'users:register' %}" >
                    {% csrf_token %}
                    <span class="login100-form-logo">
                        <i class="zmdi zmdi-landscape"></i>
                    </span>
    
                    <span class="login100-form-title p-b-34 p-t-27">
                        Register
                    </span>
    
                    <div class="wrap-input100 validate-input" data-validate = "Enter username">
                        <input class="input100" type="text" name="username" placeholder="Username" required>
                        <span class="focus-input100" data-placeholder="&#xf207;"></span>
                    </div>
    
                    <div class="wrap-input100 validate-input" data-validate="Enter password">
                        <input class="input100" type="password" name="pass" placeholder="Password" required>
                        <span class="focus-input100" data-placeholder="&#xf191;"></span>
                    </div>
    
                    <div class="wrap-input100 validate-input" data-validate="Confirm password">
                        <input class="input100" type="password" name="pass-confirm" placeholder="Confirm Password" required>
                        <span class="focus-input100" data-placeholder="&#xf191;"></span>
                    </div>
    
                    <div class="wrap-input100 validate-input" data-validate="Enter Email">
                        <input class="input100" type="email" name="mail" placeholder="E-Mail" required>
                        <span class="focus-input100" data-placeholder="&#xf191;"></span>
                    </div>
    
                    <div class="container-login100-form-btn">
                        <button class="login100-form-btn">
                            Register
                        </button>
                    </div>
    
                    <div class="text-center p-t-90">
                        <a class="txt1" href="login">
                            Already registered?
                        </a>
                    </div>
    
                </form>
            </div>
        </div>
    </div>

Here is my views.py register function:

def register(request):
    if request.method == "POST":
        username = request.POST["username"]
        password = request.POST["pass"]
        password_confirm = request.POST["pass-confirm"]
        email = request.POST["mail"]

        
        print("UserName : ", username)
        print('Email : ', email)
        print('Password : ', password)
        print('Password Confirm : ', password_confirm)

        if len(username) < 7:
            # print works, so I know that these POST variables are successfully transmitted.
            print('Username must be more than 10 char.')
            messages.error(    #messages.error won't show up. 
                request, "Username must be more than 10 char.", 'red')
            return HttpResponseRedirect(reverse('users:register'))
        
        if len(password) < 8:
            print("Your password is too short")
            messages.error(request, "Your password is too short.", 'red')
            return HttpResponseRedirect(reverse('users:register'))
        
        if (password != password_confirm):
            print("Passwords don't match")
            messages.error(request, "Passwords don't match.", 'red')
            return HttpResponseRedirect(reverse('users:register'))
        
        else:
            messages.success(request, "Success! form submitted.", 'green')
            return HttpResponseRedirect(reverse('users:register'))
        

    return render(request, 'users/register.html')

Styling for messages.error:

.green{
  color:green;
  font-size:1.3rem;
}
.red{
  color:red;
  font-size:1.3rem;
}

Please tell me if I am doing this completly wrong, I am not using the POST API from Django since I don't know how to apply my custom styling to it.

Solution

From django-doc, you can use simple format of rendering messages.

Try below format of rendering messages.

{% if messages %}
<ul class="messages">
    {% for message in messages %}
    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
    {% endfor %}
</ul>
{% endif %}

Add above messages rendering format in the top of html file or anywhere you want as:

{% if messages %}
<ul class="messages">
    {% for message in messages %}
    <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
    {% endfor %}
</ul>
{% endif %}

  <div class="limiter">
        <div class="container-login100" style="background:black;">
            <div class="wrap-login100">
                <form class="login100-form validate-form"  method='POST' action="{% url 'users:register' %}" >
                    {% csrf_token %}
                    <span class="login100-form-logo">
                        <i class="zmdi zmdi-landscape"></i>
                    </span>
    
                    <span class="login100-form-title p-b-34 p-t-27">
                        Register
                    </span>
    
                    <div class="wrap-input100 validate-input" data-validate = "Enter username">
                        <input class="input100" type="text" name="username" placeholder="Username" required>
                        <span class="focus-input100" data-placeholder="&#xf207;"></span>
                    </div>
    
                    <div class="wrap-input100 validate-input" data-validate="Enter password">
                        <input class="input100" type="password" name="pass" placeholder="Password" required>
                        <span class="focus-input100" data-placeholder="&#xf191;"></span>
                    </div>
    
                    <div class="wrap-input100 validate-input" data-validate="Confirm password">
                        <input class="input100" type="password" name="pass-confirm" placeholder="Confirm Password" required>
                        <span class="focus-input100" data-placeholder="&#xf191;"></span>
                    </div>
    
                    <div class="wrap-input100 validate-input" data-validate="Enter Email">
                        <input class="input100" type="email" name="mail" placeholder="E-Mail" required>
                        <span class="focus-input100" data-placeholder="&#xf191;"></span>
                    </div>
    
                    <div class="container-login100-form-btn">
                        <button class="login100-form-btn">
                            Register
                        </button>
                    </div>
    
                    <div class="text-center p-t-90">
                        <a class="txt1" href="login">
                            Already registered?
                        </a>
                    </div>
    
                </form>
            </div>
        </div>
    </div>

Answered By - Sunderam Dubey