10. Withholding Feedback¶

django-formset gives immediate feedback, as soon as a user starts typing into a field. While an input field has focus, and the field is believed to have invalid data, an orange warning triangle appears on the right. As soon as the field loses focus (blurs), the field is validated by the client-side implementation. If its data does not validate, a red exclamation mark is shown and the field’s border changes to red. Additionally an error message is rendered below the field. On the other hand, if the field data validates, a green tick is shown and the field’s border is rendered in green.

This default behavior is not always desired and can be configured to be less verbose.

Here is a simple form used to show how to withhold various feedback messages nearby the rejected fields. This is done by adding the attribute withhold-feedback="..." with one or a combination of those values: messages, errors, warnings and/or success. These four values can be combined to create the desired feedback.

from django.forms import fields, forms
from formset.views import FormView

class PersonForm(forms.Form):
    last_name = fields.CharField(
        label="Last name",
        min_length=2,
        max_length=50,
        help_text="Please enter at least two characters",
    )
    first_name = fields.RegexField(
        r'^[A-Z][ a-z\-]*$',
        label="First name",
        error_messages={'invalid': "A first name must start in upper case."},
        help_text="Must start in upper case followed by one or more lowercase characters.",
        max_length=50,
    )

    def clean(self):
        cd = super().clean()
        if (cd.get('first_name', '').lower().startswith("john")
            and cd.get('last_name', '').lower().startswith("doe")):
            raise ValidationError(
                f"{cd['first_name']} {cd['last_name']} is persona non grata here!"
            )
        return cd

class PersonView(FormView):
    form_class = PersonForm
    template_name = "form.html"
    success_url = "/success"

Last name:

Please enter at least two characters

First name:

Must start in upper case followed by one or more lowercase characters.

This form behaves as the default. We now can change the feedback behavior by adding the special argument withhold-feedback="…" to the directive <django-formset>.

10.1. Withhold Validation Tick¶

Last name:

Please enter at least two characters

First name:

Must start in upper case followed by one or more lowercase characters.

In this example we use withhold-feedback="success". Whenever a form field with valid data loses focus, the field border does not change to green and no tick is rendered on the right part of the field.

10.2. Withhold Error Messages¶

Last name:

Please enter at least two characters

First name:

Must start in upper case followed by one or more lowercase characters.

In this example we use withhold-feedback="messages" to withhold the red error message. Whenever a form field with invalid data loses focus, no message is rendered below that field. Note that this only applies to client-side form validation. Whenever the server rejects a submitted form containing invalid data, those messages are still rendered below those fields.

10.3. Withhold Error Symbol¶

Last name:

Please enter at least two characters

First name:

Must start in upper case followed by one or more lowercase characters.

In this example we use withhold-feedback="errors" to withhold the red field border. Whenever a form field with invalid data loses focus, no red encircled exclamation mark appears on the right and the border color does not change to red. Note that this only applies to client-side form validation. Whenever the server rejects a submitted form containing invalid data, those fields are still rendered using the “error” feedback.

10.4. Withhold Warning Symbol¶

Last name:

Please enter at least two characters

First name:

Must start in upper case followed by one or more lowercase characters.

In this example we use withhold-feedback="warnings" to withhold the orange warning triangle. Whenever a focused form field does not contain valid data (yet), no warning triangle is rendered on the right side of that field. If attribute errors has been added to withhold-feedback="…", then this warning symbol will remain even if the field loses focus.

10.5. Server-Side Validation¶

The attribute withhold-feedback="…" only has effect while editing the form fields. Whenever the user clicks on the submit button of a form containing invalid data, then all fields which did not validate using the Django clean…-methods, will show their error message together with an alert symbol and a red border.

Non-field errors need more validation logic and therefore are always detected by the server implementation, usually by the clean()-method of the form class.