Forms disabled/enable button django python

I have a problem i register site. I would like to make registartion panel and I would like to add When password and password confirmation are equal and not empty enable Register button After submit Form....But i really don't know how to do that. Could someone help me? Here is my code: signup.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <form method="post" action="{% url 'sign_upsucces' %}" >
        {% csrf_token %}

        {{ form }}

        {{ fail }}
        <button type = 'submit' {{ some }}>Zarejestruj się</button>

    </form>


</html>

views.py

def sign_upsucces(request):
    form = SignUpForm(request.POST or None)
    users = SignUp()
    people = SignUp.objects.all()
    fail = ''
    some = 'disabled'


    if form.is_valid():
        dane = form.save(commit=False)
        if (len(people)>0):
            try:
                person = SignUp.objects.get(login = dane.login)
            except SignUp.DoesNotExist:
                if dane.password == dane.password_confirm:
                    users.login = dane.login
                    users.password = dane.password
                    users.password_confirm = dane.password_confirm
                    users.save()
                    some = '<button type="submit">Zarejestruj się</button>'
                    fail = 'Konto utworzone!'
                    session = 'Zaloguj się'
                else:
                    fail = 'Hasła się nie zgadzają'
            else:
                fail = 'Istnieje'
                session = 'Zaloguj się'
        else:
            if dane.password == dane.password_confirm:
                user = SignUp()
                user.login = dane.login
                user.password = dane.password
                user.password_confirm = dane.password_confirm
                user.save()
                fail = 'Konto utworzone'
                session = 'Zaloguj się'




        return render(request, 'signup.html', {'form':form, 'dane':dane, 'fail':fail, 'some':some, 'session':session})

forms.py


class SignUpForm(ModelForm):
    class Meta:
        model = SignUp
        fields =['login','password','password_confirm']

models.py

from django.db import models

class SignUp(models.Model):

    login = models.CharField(max_length=100, blank = False, default="")
    password = models.CharField(max_length=100, blank=False)
    password_confirm = models.CharField(max_length=100, blank=False)

I would be very grateful for help. I have searched a lot but I can't find it. Thank You in advance!

Natalia

Solution

I an not sure if this can be done directly through django forms, but you can add custom javascript code to get the desired outcome.

In django forms all the input fields are assigned id based on their field name in models or forms as id_<field name> unless you specified explicitly. Keeping this in mind we can write custom js to enable/disable submit button.

You need to update your template as follows

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <form method="post" action="{% url 'sign_upsucces' %}" >
        {% csrf_token %}

        {{ form }}

        {{ fail }}
        <button type = 'submit' id="submit_button" disabled {{ some }}>Zarejestruj się</button>

    </form>
    <script>
        // create a list of id of items we will be attaching events to
        let items = ['id_password', 'id_password_confirm', 'submit_button']
        // get all items by id from items array
        let [password, password_confirm, button] = items.map((item) => document.getElementById(item))
        // add onkeyup eventlistener to all the input fields
        password.onkeyup = password_confirm.onkeyup = validator;

        // create validation function which will enable/disable submit button
        function validator(){
            button.disabled = !(password.value && (password.value === password_confirm.value))
        }
    </script>
</html>

in the above code i have accessed password fields and button by their id and wrote js code based on them. Check the comments in code to know more about how it works.

Note: I have added minimal validations i.e both password and password_confirm should be equal and not empty. Yo can extend this based on your need.