Cannot see error messages after using crispy-forms

Using Django
1

I am using class-based views and crispy-forms for an edit page and it is not showing validation errors on the page upon submit.

For example, if I leave just the month out of the date_assessment field, the page looks like it attempts to save and doesn’t leave to a new page or return any errors.

Can you help diagnose what this newbie is missing?

views.py

class DAAdultEdit(UserAccessMixin, generic.UpdateView):
    permission_required = 'daadults.change_daadult'

    model = DAAdult
    form_class = DAAdultForm
    template_name = 'clients/daadult_edit.html'

    def get_context_data(self, **kwargs):
        # Call the base implementation first to get a context
        context = super(DAAdultEdit, self).get_context_data(**kwargs)
        # Grab the single client id passed in from urls.py
        client_id = self.kwargs['client_id']
        context['c_id'] = client_id
        context['client_full_name'] = get_object_or_404(Client, id=client_id)
        return context

    def get_success_url(self):
        return reverse('clients:detail', args=[str(self.object.client.pk)])

forms.py

class DAAdultForm(ModelForm):
	class Meta:
		model = DAAdult
		# Using "exclude" because we need to have all fields available for crispy-forms to work in Layout below
		exclude = ['client']
		widgets = {
			'date_assessment': widgets.DateInput(attrs={'type': 'date'}),
			'individuals_present': widgets.Textarea(attrs={'rows': '3'})
		}

	def __init__(self, *args, **kwargs):
		super().__init__(*args, **kwargs)
		self.helper = FormHelper()
		self.helper.layout = Layout(
			Fieldset('',
				'date_assessment',
				'completed_by',
				'individuals_present'
			),
			ButtonHolder(
				Submit('submit', 'Save'),
				HTML("<a href='{{ view.get_success_url }}' class='btn btn-light'>Cancel</a>")
			)
		)

daadult_edit.html

{% extends "base.html" %}
{% block title %}Edit DA Adult - CFS1{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-sm-12 col-lg-6">
            <h2>Edit DA Adult for {{ client_full_name }}</h2>

            {% load crispy_forms_tags %}
            {% crispy form %}
        </div>
    </div>
{% endblock content %}
2

Your get_success_url appears to me that it’s set up to return you to the same page. How are you sure that there are errors in the form causing the page to be regenerated rather than the submission being successful?

More specifically, when you submit your form, what are you seeing in your console regarding the POST (and possibly subsequent GET) request?

3

Good questions…

  1. The get_success_url points to the “parent” page, the Client Detail page. The problem edit page that the above code is from is the DAAdult Edit page.

  2. A little bit more explanation about what I’m seeing upon clicking the “Save” button on the DAAdult Edit page…

  • First I open the page and in my console see:
    [13/Jan/2022 07:33:18] "GET /clients/2/daadult/1/edit HTTP/1.1" 200 43495
  • Next, I delete the month from the already saved date_assessment field, causing it to look like: mm/12/2022.
  • Next, I scroll to the bottom of the form and click the Save button. When I do that, nothing new appears in the console. So, I believe it is a client-side validation issue. I don’t see anything in the Chrome Console, so I’m not sure what could be off or even how to look for an error.

Hope that helps give more context to the issue.

4

I agree that it sounds like a client-side issue.

What JavaScript libraries are you using?

What does the rendered HTML of the date_assessment field look like?

5

As for JavaScript libraries… I’ve only added Bootstrap5 via the crispy-forms package called, crispy_bootstrap5.

When I view the HTML source of the rendered page, the only .js file appearing is the one for a Bootstrap CDN: https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js

The rendered HTML of the date_assessment field looks like this:
<div id="div_id_date_assessment" class="mb-3"> <label for="id_date_assessment" class="form-label requiredField">Date assessment<span class="asteriskField">*</span> </label> <input type="date" name="date_assessment" value="2022-01-03" class="dateinput form-control" required id="id_date_assessment"></div>

6

You are correct. With the field marked as “required”, it will not submit with an invalid value - your view never sees it as input.

See <input type="date"> - HTML: HyperText Markup Language | MDN, particularly the section at Handling browser support

Apparently, there are a number of browser-specific related issues with using input type=“date”, but the basic issue is that there’s no requirement for the browser to do anything when a valid value isn’t present.

1 Like
7

Got it. Thank you, as always, for your help!