Hi everyone,

I have an IntegerField for which I require response (blank!=True). When no answer is provided, an error message pops up on top of the first choice of the unanswered field. I attach an image of that behavior.

I would like the pop-up to not signal a specific choice. Ideally, flagging the whole question or the whole set of answers. Is there any way of doing so?

I include the main pieces of the code:

class Player(BasePlayer):
    best = models.IntegerField(
        choices=[[0, 'Strongly Disagree'],
                [1, 'Disagree'],
                [2, 'Neither Agree nor Disagree'],
                [3, 'Agree'],
                [4, 'Strongly Agree']],
        widget=widgets.RadioSelect
    )
    
{{ block content }}
<b>Answer the following question:</b>
<br>

<div class="card">
    <div class=card-header><b>Do you agree?</b></div>
    <div class="card-body">
        {{ formfield 'agree' label=''}}
    </div>
</div>
<br>

<button class="otree-btn-next">Next</button>

{{ endblock }}

Here is an idea:

In __init__.py, include

class Player(BasePlayer):

    agree = models.IntegerField(
        choices=[
            [0, 'Strongly Disagree'],
            [1, 'Disagree'],
            [2, 'Neither Agree nor Disagree'],
            [3, 'Agree'],
            [4, 'Strongly Agree'],
        ],
        widget=widgets.RadioSelect,
        initial=99,
        blank=True,
    )

as well as something like the following:

class MyPage(Page):
    
    form_model = 'player'
    form_fields = ['agree']


def agree_error_message(player, value):

    if value not in [0, 1, 2, 3, 4]:
        return 'You have to select one of the options.'

If a participant does not select any of the radio buttons, this will show a hint as shown in the attached screenshot.

(Based on https://www.otreehub.com/forum/183/.)

Based on an older post (https://www.otreehub.com/forum/1041/), here is some code that you could include in your HTML template to customize the highlighting of the input that has been missed by the participant:

<style>
    .otree-form-errors {
        display: none;  /* Hide the global error message */
    }
</style>

<div class="card">
    <div class=card-header><b>Do you agree?</b></div>
    <div class="card-body">
        <div {{ if "agree" in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
            {{ formfield "agree" }}
        </div>
    </div>
</div>

Thanks, that is a good solution!

I’m glad I could help.

I just realized, by the way, that this also works without `initial=99`.

True, thanks!