Django ModalForm在bootstrap Modal表单上显示验证错误

时间:2017-01-26 15:44:59

标签: django django-forms bootstrap-modal django-validation

我无法在我的bootstrap模态表单上显示django验证错误。我需要在表单上设置client_phone字段不少于13个字符,如果没有 - 显示错误并突出显示该字段。 Django - 1.10,Bootstrap 3

以下是代码:

型号:

class Order(models.Model):
    order_date = models.DateTimeField(auto_now_add=True, blank=True)
    client_phone = models.CharField(max_length=18)
    client_email = models.EmailField(max_length=50)

然后是ModelForm:

class OfferForm(ModelForm):
    class Meta:
        model = Order
        fields = ['client_phone', 'client_email']
        widgets = {
            'client_phone': TextInput(attrs={'class': 'form-control bfh-phone', 'data-country': 'UA', }),
        }
        labels = {
            'client_phone': _('Контактный номер'),
        }

带有引导模式形式的模板:

<div class="modal fade" id="offerModalForm" tabindex="-1" role="dialog"
             aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <form role="form" action="ordercomplete" method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            {{ form }}
                            <div class="modal-footer">
                                <button type="submit" id="offerSubmitBtn" class="btn btn-primary" type="submit">
                                    Оформить заказ
                                </button>
                                <button type="button" class="btn btn-primary"
                                        data-dismiss="modal">
                                    Закрыть
                                </button>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>

如果我喜欢这样:

def clean_client_phone(self):
        phone = self.cleaned_data.get('client_phone')
        if len(phone) < 13:
            raise forms.ValidationError(_('Invalid value'), code='invalid')
        return phone

然后form.isValid()变为False,什么都没发生。

此处还有我的观点:

def ordercomplete(request):
    if request.method == 'POST':
        form = OfferForm(request.POST, request.FILES)
        if form.is_valid():
            order = form.save()
            date = order.order_date.strftime('%d-%m-%Y %H:%M')
            phone = form.cleaned_data['client_phone']
        return render(request, 'viveska/ordercomplete.html')
    else:
        return render(request, 'viveska/ordercomplete.html')

html模式是我的主页面的一部分,我称之为按下按钮:

<button type="button" class="btn btn-lg make_order_btn" data-toggle="modal"
                            data-target="#offerModalForm">Оформить заказ
                    </button>

更新1:

我编辑了这样的ordercomplete视图:

def ordercomplete(request):
    args = {}
    if request.method == 'POST':
        form = OfferForm(request.POST, request.FILES)
        logger.error(form.is_valid())
        if form.is_valid():
            order = form.save()
            return render(request, 'viveska/ordercomplete.html')
    else:
        form = OfferForm()
    phone_list = list(Phones.objects.all())
    logger.error(form.is_bound)
    args['form'] = form
    args['phone_list'] = phone_list
    return render(request, 'viveska/index.html', args)

现在它显示了字段错误,但每当某个值无效时,它会隐藏表单,因为它是模态的。如何在提交无效值后将其保留在屏幕上?

2 个答案:

答案 0 :(得分:0)

你在90%的路上。

查看:

    form_error = False
    if form.is_valid():
        order = form.save()
        date = order.order_date.strftime('%d-%m-%Y %H:%M')
        phone = form.cleaned_data['client_phone']
    else:
        form_error = True

模板:

    {% if form_error %}
        $(#offerModalForm).modal("show");
    {% endif %}

如果出现错误,这将向用户显示模态表单。

我相信JavaScript验证可能还有很长的路要走,因为它不会导致任何加载行为并为您提供更好的格式化消息。上面的解决方案将重新加载页面(用户可以看到),然后打开模态窗口(再次,用户可以看到它)。

我可以看到,在表单中进行表单验证的最大优点是,您可以在使用表单的任何地方进行非常一致的验证,而无需更改或添加任何其他代码。

答案 1 :(得分:-1)

最后,我通过JavaScript进行了模态表单验证。谢谢你的回答。