Error message display for radio button required response

I have a simple form that has 19 required radio buttons. The required functionality works, but the error message it displays changes goes away you scroll past the unanswered question.

For example, if I don’t answer question 2, scroll to the bottom of the page and submit, it correctly returns to the missing answer, highlights a button but displays on error text:

CleanShot 2024-09-14 at 09.13.24

If I don’t answer one that is still on screen and submit it displays:

CleanShot 2024-09-14 at 09.13.42

relevant code:

<td>
                                  
                                    <input name= {{a_question.id}} type="radio" value={{ n }}  id="{{name}}" required /><lable> Not Sure</lable>
                              
                                  </td>
                                  {% else %}
                                  <td>
                                  
                                  <input name={{a_question.id}} type="radio" value={{ n }}  id="{{name}}" required /><lable> {{n}}</lable>
                                  </td>

Is this just normal behavior or am I missing something? I’d like to have the text display always to prompt the user.

That must be a third-party library you are using to render the messages - or, if you’ve got some kind of client-side validation going on, an attribute of the browser itself.

In the latter case, that is an issue of the brower. In the former case, that external library.

You can determine which one it is by seeing whether or not the data was POSTed back to the server. (If no POST occurs, then it’s the browser doing this. If there is a POST, then it is something with how the form is being rerendered for an invalid form.)

When Django normally renders an error message, it’s rendered as html text within the page itself, not as a pop-up or overlay.

This is a message displayed by the browser, which appears because your radio inputs have the required attribute. Different browses will probably display the message in slightly different ways. There’s nothing you can do to change it.

If you wanted to display a different kind of message, you’d need to use JavaScript to listen for when the form is submitted, look at all the radio buttons, and display a message if none are selected. There are third-party JS libraries that would make this easier but I haven’t used any for years, so can’t recommend a specific one.

Thanks to both of you. I suspected it was a browser issue as nothing appeared to be returned when submit was clicked.

As a side note, I plan to use a form so I can do data validation, etc, but am struggling a bit to understand ho to incorporate the HTML code. I can do basic code, such as my login form, but tables, etc. are a bit confusing still. I’ve done the djangoporject and djangogirls tutorials but am looking for one that provides a bit more detail on integrating html layouts, especially for tables.

Any suggestions would be appreciated.

Turns out to be how Safari on Mac displays error messages, Chrome on the Mac displays the message at the first blank row when you submit, even if you’ve scrolled past the row.

Yes, this is how browsers respond to required fields not being completed. It prevents the form being submitted until any required fields are completed.

It’s not a substitute for performing validation in Django, because users could tamper with the HTML in their browser, or use a browser that doesn’t perform this validation, and submit a form without those fields completed.

As a side note, I plan to use a form so I can do data validation, etc, but am struggling a bit to understand ho to incorporate the HTML code.

If you have a specific question then I’m sure someone can help (perhaps in a new post) but it’s hard from this to know exactly what the difficulty is.

Thanks. At this point I’m just looking for tutorials that provide more details on how to incorporate HTML into Forms. The djangoproject and djangogirls are helpful but I am combining radio buttons and text fields in tables. I’m not at the point of “I’ve tried x, y, z” and thus able to ask a good question; just learning how to create the form.

To a degree, it’s the other way around.

It’s less an issue of incorporating HTML into your form, as it is an issue of incorporating your form into your HTML.

You have different levels of integration available.

The easiest and most direct is the rendering of your individual form fields within your template. This relies upon the standard widget templates to render those fields.

You can get more involved by replacing those default widget templates with your own custom templates for more precise control.

The easiest way to help you figure out how far you need to go is to start with the actual HTML that you are trying to render, and then work backward toward a template to figure out what you need to have done by the template to render your desired result. But if you don’t know what your end-result needs to be in HTML, then trying to produce a template is going to be a frustrating experience.

This section of the docs’ “Working with forms” page is useful, in case you haven’t come across it: Working with forms | Django documentation | Django

And this is a useful tutorial about the same ideas: How to Render Django Form Manually