django-crispy-forms 的替代品

Question

I am developing an application in django 2.1 and using bootstrap 4 which requires a form for the registration of users. In most of the examples I have seen, examples of single-column forms are shown, which is enough for a form with few fields, but for a more complex one it would be ugly since you would have to scroll through the number of fields. For which I wanted to design a form of this typeServer side

Investigating a bit I found this tutorial Advanced Form Rendering with Django Crispy Forms in which use is made of Django Crispy Forms and you get the form you wanted. However I did not want to use it, so try to do it manually and get to this. I think that it can be improved a little more since it is not so clean, however it is an alternative to reach the same result as using Django Crispy Forms.I think this can be done using ajax but so far I have never used it. He will also ask himself why complicate doing this if someone already did it, well it is a way to understand how everything works without any magic.

views.py

def sign_up(request):
if 'code_user' in request.session:
    return redirect('home')
elif request.method == 'POST':
    form = SignupForm(request.POST)
    if form.is_valid():
        user = form.save()
        request.session['code_user'] = user.code
        request.session['username'] = user.username
        return redirect('home')
    else:
        for field in form:
            if field.errors:
                form.fields[field.name].widget.attrs['class'] = 'form-control is-invalid'
        return render(request, 'blog/signup.html', {'form': form})

else:
    form = SignupForm()
    return render(request, 'blog/signup.html', {'form': form})

To indicate which fields are not valid you must add this class 'is-invalid' otherwise it will not work.

forms.py

class SignupForm(forms.ModelForm):

class Meta:
    model = User
    fields = ['username', 'email', 'password', 'first_name', 'last_name', 'age', 'gender', 'country']
    widgets = {
        'username': forms.TextInput(attrs={'class': 'form-control', }),
        'country': forms.Select(attrs={'class': 'form-control', }),
        'first_name': forms.TextInput(attrs={'class': 'form-control', }),
        'last_name': forms.TextInput(attrs={'class': 'form-control', }),
        'age': forms.DateInput(attrs={'class': 'form-control', 'type': 'date'}),
        'email': forms.EmailInput(attrs={'class': 'form-control', }),
        'password': forms.PasswordInput(attrs={'class': 'form-control', }),
        'gender': forms.Select(attrs={'class': 'form-control', }),
    }
    labels = {
        'username': _('Username'),
        'country': _('Country'),
        'first_name': _('First Name'),
        'last_name': _('Last Name'),
        'age': _('Birthdate'),
        'email': _('Email'),
        'password': _('Password'),
        'gender': _('Gender'),
    }
    error_messages = {
        'username': {
            'unique': _('The username is not available')
        },
        'first_name': {
            'required': _('The field can not be empty')
        },
        'last_name': {
            'required': _('The field can not be empty')
        },
        'password': {
            'required': _('The field can not be empty')
        }

    }

signup.html

    {% extends 'blog/base.html' %}

{% block content %}

 <div class="row justify-content-center" style="padding-top: 1rem">
     <div class="col-md-10">
         <div class="card">
             <div class="card-header text-center">Sign up</div>
             <div class="card-body">
                 <form method="POST">
                     {% csrf_token %}
                     <div class="form-row">
                         <div class="form-group col-md-4">
                             <label >{{ form.username.label }}</label>
                             {{ form.username }}
                             {% for error in form.username.errors %}
                                 <div class="invalid-feedback">{{ error }}</div>
                             {% endfor %}
                         </div>

                         <div class="form-group col-md-4">
                             <label>{{ form.first_name.label }}</label>
                             {{ form.first_name }}
                             {% for error in form.first_name.errors %}
                                 <div class="invalid-feedback">{{ error }}</div>
                             {% endfor %}
                         </div>

                         <div class="form-group col-md-4">
                             <label>{{ form.last_name.label }}</label>
                             {{ form.last_name }}
                             {% for error in form.last_name.errors %}
                                 <div class="invalid-feedback">{{ error }}</div>
                             {% endfor %}
                         </div>
                     </div>

                     <div class="form-row">
                         <div class="form-group col-md-4">
                             <label >{{ form.age.label }}</label>
                             {{ form.age }}
                             {% for error in form.age.errors %}
                                 <div class="invalid-feedback">{{ error }}</div>
                             {% endfor %}
                         </div>

                         <div class="form-group col-md-4">
                             <label >{{ form.gender.label }}</label>
                             {{ form.gender }}
                             {% for error in form.gender.errors %}
                                 <div class="invalid-feedback">{{ error }}</div>
                             {% endfor %}
                         </div>

                         <div class="form-group col-md-4">
                             <label >{{ form.country.label }}</label>
                             {{ form.country}}
                             {% for error in form.country.errors %}
                                 <div class="invalid-feedback">{{ error }}</div>
                             {% endfor %}
                         </div>
                     </div>

                     <div class="form-row">
                         <div class="form-group col-md-6">
                             <label >{{ form.email.label }}</label>
                             {{ form.email }}
                              {% for error in form.email.errors %}
                                 <div class="invalid-feedback">{{ error }}</div>
                             {% endfor %}
                         </div>

                         <div class="form-group col-md-6">
                             <label >{{ form.password.label }}</label>
                             {{ form.password }}
                              {% for error in form.password.errors %}
                                 <div class="invalid-feedback">{{ error }}</div>
                             {% endfor %}
                         </div>
                     </div>

                     <button type="submit" class="btn btn-primary">Sign in</button>
                 </form>
             </div>
         </div>
     </div>
 </div>

{% endblock %}

In the template I guess that is where everything is less clean see so many cycles overwhelms me and I think it is not optimal.

Answer 1

Perhaps the post below helps, it shows how to use django-floppyforms to better organize the frontend files

Better usage of JS & CSS inside Django