html checkbox with required attribute is validated(red) before submitting

Question

I have this checkbox:

<div>
    <input required type="checkbox" id="effectiveness" name="effectiveness">
    <label for="effectiveness">Wirksamkeit</label>
</div>

And this button to submit:

<input type="submit" id="commitChanges" name="commitChanges" value="Freigeben" tal:condition="python: not training['released'] "/>

All inside a form. If the checkbox has an invalid value, it is red from the opening of the page on and not only after pressing the button. Does anyone know how to change that?

Edit (extra info): I don't want the checkbox to be red. I want it to bei normal until i press the button "Wirksamkeit". Than it should turn red, if the value of the checkbox is invalid

Edit:

Here is the full code:

<tr tal:define="effectiveness view/get_effectiveness">
    <td>
        <select name="effectiveness_helper" id="effectiveness_helper" style="display: none;">
            <option value="default">default</option>
            <option value="yes">yes</option>
            <option value="no">no</option>
        </select>
        <div>
          <input required type="checkbox" id="effectiveness" name="effectiveness">
          <label for="effectiveness">Wirksamkeit</label>
        </div>
        <script tal:condition="python: effectiveness['effectiveness'] == 2">
            $("#effectiveness").prop("indeterminate", true).prop("checked", false)
        </script>
        <script tal:condition="python: effectiveness['effectiveness'] == 1">
            $("#effectiveness").prop("checked", true)
        </script>
        <script tal:condition="python: effectiveness['effectiveness'] == 0">
            $("#effectiveness").removeProp('required').prop("checked", false)
        </script>
        <script tal:condition="python: not training['effectiveness_verification']">
            $("#effectiveness").removeProp('required');
        </script>
        <script tal:condition="python: training['released']">
            $("#effectiveness").removeProp('required').prop("disabled", "disabled");
        </script>
        <script>
            $("#effectiveness").change(function() {
                if (!$(this).is(":checked")) {
                    $(this).removeProp('required');
                }
            });
            let checkbox = document.getElementById("effectiveness");
            let dropdown = document.getElementById("effectiveness_helper");

            checkbox.addEventListener("change", (event) => {
                let checked = event.target.checked;
                dropdown.value = checked ? "yes" : "no";
            });
        </script>
    </td>
</tr>

And here is an drop-down menu where it works like i want it to. The drop-down menu gets red only after I clicked the freigeben button.

<tr tal:define="overall view/get_training">
    <td tal:content="overall/rating" tal:condition="python: training['released']"></td>
    <td tal:condition="python: not training['released']" id="rating" >
        <select required size="1" id="rating" name="rating">
            <option value=="">Bitte Auswählen</option>
            <option tal:define="rating overall/rating;" tal:repeat="rate python:view.get_all_training_evaluations(rating)"
                    tal:content="rate/text" tal:attributes="selected python:rate['selected']">
            </option>
        </select>
    </td>
</tr>

The code might look a little weird, because it is a 3-state checkbox and the third state (default) is the only invalid state.

I tried it with an normal 2StateCheckbox for testing and it worked like i would expect. I think the problem is, that i'm setting the property "checked" false. (I think so because, if i'm clicking on the normal Checkbox and setting the value invalid (unchecked) and than setting the focus to another element it also turns red). But I still have no idea how to fix this problem. I already tried to set the focus on another element. I also set the property with jQuery after setting the checked property to false (in other words first $("#effectiveness").prop("checked", false); and second $("#effectiveness").prop('required', true); without setting the required property inside the html tag). But nothing of that worked.

Answer 1

It's impossible to style a checkbox directly, but you can apply the styling to the label. Below the label is red when the required checkbox is not checked. Styling is not applied when the checkbox is not mandatory.

input:required:not(:checked) + label {
  background: red;
}

<div>
  <input required type="checkbox" id="required">
  <label for="required">Required</label>
  <input type="checkbox" id="notrequired">
  <label for="notrequired">Not required</label>
</div>

Answer 2

Check this, you can't apply styles to a checkbox, but you can substitute them by a new full CSS item.

You should change your html to this:

<label class="container">Wirksamkeit
  <input type="checkbox" id="effectiveness" name="effectiveness">
  <span class="checkbox"></span>
</label>

And add some CSS, I already did it for you check it here.

Basically you will hide the original checkbox and create a totally new one on which you can apply any style you want.

EDIT:

I don't want the checkbox to be red. I want it to bei normal until i press the button "Wirksamkeit". Than it should turn red, if the value of the checkbox is invalid – Simon Rechermann

New code, this change on submit, and prevent form to submit if checkbox is not checked.