Я занимаюсь разработкой приложения в django 2.1 и использую bootstrap 4
для чего требуется форма для регистрации пользователей. В большинстве примеров, которые я видел, показаны примеры форм с одним столбцом, что достаточно для формы с несколькими полями, но для более сложной это будет некрасиво, поскольку вам придется прокручивать количество полей. Для которого я хотел разработать форму этого типа Серверная сторона
Изучая немного, я нашел этот урок Усовершенствованный рендеринг форм с хрустящими формами Django , в котором используются
Джанго Хрустящие Формы и вы получите форму, которую вы хотели. Однако я не хотел использовать это, поэтому попробуйте сделать это вручную и добраться до этого. Я думаю, что его можно улучшить еще немного, поскольку он не такой чистый, однако это альтернатива для достижения того же результата, что и при использовании хрустящих форм Django. Я думаю, что это можно сделать с помощью ajax, но до сих пор я никогда не использовал его.
Он также спросит себя, зачем усложнять это, если кто-то уже это сделал, это способ понять, как все работает без всякой магии.
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})
Чтобы указать, какие поля недопустимы, вы должны добавить этот класс 'is-invalid', иначе он не будет работать.
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 %}
В шаблоне я предполагаю, что здесь все менее чисто, потому что столько циклов переполняет меня, и я думаю, что это не оптимально.