POST method doesn't recieve any information from Form (DJANGO & BOOTSTRAP)-CodePudding

I have a form which registers a new user, I used Bootstrap 5 to make it look nice. However, when I press the submit button the form does not validate. The error it shows when I write print(form.errors) says that every field is required, which means it didn't recieve anything. Why does this happen? This is my code:

HTML

<div class="card" id='signup_card'>
<div class='card-header'>
    <h2 class='card-title'>Sign Up</h2>
</div>
<div class='card-body'>
    <form method='POST' action="" id='create_user_form' style="color: #fff;">
        {% csrf_token %}
        <label for='usernameInput' class="form-label">{{form.username.label}}:</label>
        <input type="text" id='usernameInput' style="margin-bottom: 20px;">

        <label for='phoneNumberInput' class="form-label">{{form.phone_number.label}}:</label>
        <input type="text" id='phoneNumberInput' style="margin-bottom: 20px;">

        <label for='emailInput' class="form-label">{{form.email.label}}:</label>
        <input type="text" id='emailInput' style="margin-bottom: 20px;">

        <label for='password1Input' class="form-label">{{form.password1.label}}:</label>
        <input type="text" id='password1Input' style="margin-bottom: 20px;">

        <label for='password2Input' class="form-label">{{form.password2.label}}:</label>
        <input type="text" id='password2Input' style="margin-bottom: 20px;">
        
        <button class="btn btn-primary" type='submit'>Submit</button>
    </form>
</div>

models.py

class Account(User):
    phone_number = BigIntegerField()

forms.py

class CreateAccountForm(UserCreationForm):
    class Meta:
        model = Account
        fields = ['username', 'email', 'phone_number', 'password1', 'password2']

views.py

def signup(request):
    if request.method == 'GET':
        form = CreateAccountForm()
        ctx = {
            'form':form
        }
        return render(request, 'signup.html', ctx)

    if request.method == 'POST':
        form = CreateAccountForm(request.POST)
        if form.is_valid():
            form.save()
        else:
            print(form.errors)

        return render(request, 'index.html')

CodePudding user response：

Your input elements need to specify a name="…" attribute to specify for which name they will associate a value:

<form method='POST' action="" id='create_user_form' style="color: #fff;">
    <label for='usernameInput' class="form-label">{{form.username.label}}:</label>
    <input type="text"name="username" id='usernameInput' style="margin-bottom: 20px;">

    <label for='phoneNumberInput' class="form-label">{{form.phone_number.label}}:</label>
    <input type="text" name="phone_number" id='phoneNumberInput' style="margin-bottom: 20px;">

    <label for='emailInput' class="form-label">{{form.email.label}}:</label>
    <input type="text" name="email" id='emailInput' style="margin-bottom: 20px;">

    <label for='password1Input' class="form-label">{{form.password1.label}}:</label>
    <input type="text" name="password1" id='password1Input' style="margin-bottom: 20px;">

    <label for='password2Input' class="form-label">{{form.password2.label}}:</label>
    <input type="text" name="password2" id='password2Input' style="margin-bottom: 20px;">
    <button class="btn btn-primary" type='submit'>Submit</button>
</form>

CodePudding user response：

Your error is normal because you need add a name attribute to input field :

<label for='usernameInput' class="form-label">{{form.username.label}}:</label>
<input type="text" id='usernameInput' name='username' style="margin-bottom: 20px;">

You can also use full Django form like this :

<label for='usernameInput' class="form-label">{{form.username.label}}:</label>
{{ form.username }}

Now, if you want add some boostrap class name to have nice look, you can override the Form class __init__ method like this :

class CreateAccountForm(UserCreationForm):
    class Meta:
        model = Account
        fields = ['username', 'email', 'phone_number', 'password1', 'password2']
    
    # Here we override the form elements attributes to add boostrap class
    def __init__(self, *args, **kwargs):
        super(RegistrationForm, self).__init__(*args, **kwargs)
        # Add some placeholder to username input field
        self.fields['username'].widget.attrs['placeholder'] = 'Your username'
        # add an id to username input field
        self.fields['username'].widget.attrs['id'] = 'usernameInput'

        # add the same class to all the fields (commom attribute value for all)
        for field in self.fields:
            self.fields[field].widget.attrs['class'] = 'form-control'

More about Django model form here