Django ModalForm show validation error on bootstrap Modal form

Question

I couldn't show django validation errors on my bootstrap modal form. I need to set client_phone field on the form was no less than 13 characters, if not - show error and highlight the field. Django - 1.10, Bootstrap 3

Here is the code:

Model:

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)

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

Template with the bootstrap Modal form:

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

If I do like this:

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

Then form.isValid() become False and nothing happened.

Also here is my view:

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 modal is a part of my main page, where I call it pushing button:

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

Update 1:

I edited ordercomplete view like this:

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)

and now it shows me field errors, but every time when some value is invalid it hides the form because it's modal. How can I kept it on screen after submit with invalid values?

Answer 1

Finally I did modal form validation via JavaScript. Thanks for answers.

Update 14/06/2022 Today I would go with HTMX instead of inventing custom validation with JS