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

Question

我无法在我的 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)

然后是模型：

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': _('Контактный номер'),
        }

具有 bootstrap 模态形式的模板：

<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)

现在它向我显示字段错误，但每次当某些值无效时它会隐藏表单，因为它是模态的。使用无效值提交后如何将其保留在屏幕上？

Answer 1

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

Answer 2

你已经完成了 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 验证可能仍然是可行的方法，因为它不会导致任何加载行为并为您提供格式更好的消息。上述解决方案将重新加载页面（用户可以看到），然后打开模态 window（同样，用户可以看到）。

据我所知，在表单本身中进行表单验证的最大优势在于，您可以在任何使用表单的地方进行非常一致的验证，而无需更改或添加任何其他代码。

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

Django ModalForm show validation error on bootstrap Modal form

django

django-forms

django-validation

bootstrap-modal