mysociety / contract-countdown

https://mysociety.github.io/contract-countdown/
0 stars 0 forks source link

Improving error handling for postcode input #32

Closed zarino closed 1 year ago

zarino commented 1 year ago

Using {% bootstrap_field %} gets us nice automatic error handling, and just feels like the right thing to do.

But for that to work, we need server_side_validation enabled, which brings with it the green "is-valid" styling on valid inputs, which looks weird when you’re submitting the search/filter form.

There is, annoyingly, no way to prevent django-bootstrap5 from generating these .is-valid classes, so instead we customise our Bootstrap settings to prevent the .is-valid style rules from ever being generated. This means duplicating a few more lines of bootstrap/_variables.scss into our own /_variables.scss, but I think it’s worth it to avoid the distracting .is-valid styling.

One annoyance I couldn’t avoid was the autocomplete library’s addition of an extra wrapper element around the text input, which breaks Bootstrap’s stupidly over-engineered CSS selector, and prevents error messages from being displayed.

As a result, despite using {% bootstrap_field %}, I still had to include my own error message output below, which kind of defeats the purpose.

It may be worth investigating whether our autocomplete library has an option to avoid injecting a wrapper element, but what we’ve got right now works in the meantime.

When a postcode error is displayed, it changes the height of the form row, meaning the submit button no longer lined up nicely. I’ve adjusted the form markup, to enable the button to line up with the other inputs regardless of whether an error is being displayed or not.

I made filter.form.pc.errors into a list, because that’s what the error handler in bootstrap_field expects. (If you use a string instead of a list, it explodes the string into many single-character error messages!)

Finally (!) I also "set_placeholder": False because we shouldn’t be using placeholders anywhere.

Part of #31.

Screenshot 2022-10-26 at 13-38-49 Contract Countdown

Screenshot 2022-10-26 at 13-38-42 Contract Countdown