我在模态引导程序中有一个表单(弹出)。问题是,当Django没有清理表单时,错误在表单字段下面以红色写入,但模式关闭。
用户认为表单是有效但不是。
我的表格:
class signupForm(forms.Form):
username = forms.CharField(max_length=25)
mail = forms.EmailField(label="Email", max_length=82)
password = forms.CharField(max_length=50)
def clean_mail(self):
mail = self.cleaned_data['mail']
testMail = User.objects.filter(email=mail)
if len(testMail)>0:
raise forms.ValidationError("Already used.")
return mail
观点:
def signup(request):
if request.method == "POST":
form = signup(request.POST)
if form.is_valid():
mail = form.cleaned_data["mail"]
username = form.cleaned_data["username"]
password = form.cleaned_data["password"]
u = User.objects.create_user(username,mail,password)
u.save()
the_user = authenticate(username=username, password=password)
login(request,the_user)
return redirect(...)
else :
error = True
else :
form = signupForm()
return render(request,...)
最重要的是,模板:
<a href="#" data-toggle="modal" data-target="#myModal"><i> Signup </i></a>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title"> <b> Signup </b> </h3>
</div>
<div class="modal-body">
{% load bootstrap %}
<form method="POST" action="{% url 'signup' %}" class="">
{% csrf_token %}
<div class="row">
<div class="col-md-offset-2 col-md-8">
{{ formSignup|bootstrap }}
</div>
</div>
<div class="div-button">
<input type="submit" class="btn btn-info" value="Sign up">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Quit</button>
</div>
</div>
</div>
</div>
如何在未清除表单时保留注册表单(模式引导程序)?
答案 0 :(得分:0)
我也遇到过这个问题。我能够通过引用this post (to add "has-error" to the offending Form input)来解决问题。请注意,我正在使用Crispy Forms和AJAX表单提交。
表格:
class SomeForm(models.ModelForm):
def __init__(self, data=None, *args, **kwargs):
super(SomeForm, self).__init__(data, *args, **kwargs)
self.helper = FormHelper()
self.helper.form_class = "form-horizontal"
self.helper.form_id = "id_some_form"
self.helper.form_action = reverse('some-form-url')
self.helper.label_class = 'col-md-4'
self.helper.field_class = 'col-md-6'
self.helper.layout = Layout(
Fieldset('The Details',
'field1',
'field2',
),
Fieldset('',
Div(
Button('cancel', 'Cancel', css_class='btn btn-danger', data_dismiss="modal"),
Submit('submit', 'Create', css_class='btn btn-success'),
css_class='col-md-10 text-right',
),
),
)
观点:
form = SomeForm(request.POST)
if form.is_valid():
...
elif form.non_field_errors():
form.helper['field2'].wrap(Div, css_class="has-error")
触发Modal表单的模板中的HTML:
<button class="btn btn-xs btn-success"
onclick="launchModalForm(this)"
data-title="Add New Thing"
data-target-url="{% url 'thing-create' %}"
data-success-url="{% url 'thing-list' %}">
<span class="glyphicon glyphicon-plus-sign"></span>
Add Thing
</button>
注意:“data-target-url”属性应该是触发实例化Form的View的URL。 “data-success-url”属性应该是成功提交表单后重定向到的URL。
用于在“模态”窗口中呈现表单的模板:
{% load crispy_forms_tags %}
{% crispy form %}
用于AJAX表单的Javascript表单在Bootstrap Modal窗口中呈现/提交:
var formAjaxSubmit = function(form, modal, success_url) {
$(form).submit(function (e) {
e.preventDefault();
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: $(this).serialize(),
success: function (xhr, ajaxOptions, thrownError) {
if ( $(xhr).find('.has-error').length > 0 ) {
$(modal).find('.modal-body').html(xhr);
formAjaxSubmit(form, modal, success_url);
} else {
// $(modal).modal('toggle');
window.location.href = success_url;
}
},
error: function (xhr, ajaxOptions, thrownError) {
}
});
});
};
window.launchModalForm = function(value) {
var modal_title = $(value).attr('data-title');
var modal_target_url = $(value).attr('data-target-url');
var success_url = $(value).attr('data-success-url');
$('.modal-title').text(modal_title);
$('#form-modal-body').load(modal_target_url, function () {
$('#form-modal').modal('toggle');
formAjaxSubmit('#form-modal-body form', '#form-modal', success_url);
});
};