html флажок с обязательным атрибутом проверяется (красный) перед отправкой

Question

У меня есть этот флажок:

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

И эта кнопка для отправки:

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

Все внутри формы. Если флажок имеет недопустимое значение, он становится красным с момента открытия страницы, а не только после нажатия кнопки. Кто-нибудь знает, как это изменить?

Изменить (дополнительная информация): Я не хочу, чтобы флажок был красным. Я хочу, чтобы все было нормально, пока я не нажму кнопку "Wirksamkeit". Тогда он должен стать красным, если значение флажка недействительно

Изменить:

Вот полный код:

<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>

А вот раскрывающееся меню, в котором все работает так, как я хочу. Выпадающее меню становится красным только после того, как я нажал кнопку freigeben.

<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>

Код может выглядеть немного странно, потому что это флажок с 3 состояниями, а третье состояние (по умолчанию) - единственное недопустимое состояние.

Я попробовал это с обычным 2StateCheckbox для тестирования, и он работал так, как я ожидал. Я думаю, проблема в том, что я устанавливаю свойство "checked" false. (Я так думаю, потому что, если я нажимаю на обычный флажок и устанавливаю недопустимое значение (не отмечено), а чем устанавливаю фокус на другой элемент, он также становится красным). Но я до сих пор не знаю, как решить эту проблему. Я уже пробовал акцентировать внимание на другом элементе. Я также установил для свойства значение jQuery после установки для свойства checked значения false (другими словами, first $ ("#fficiency"). Prop ("checked", false); и второй $ ("#fficiency"). Prop ( 'required', true); без установки обязательного свойства внутри тега html). Но ничего из этого не сработало.

Answer 1

Отметьте это , вы не можете применить стили к флажку, но вы можете заменить их новым полным CSS элементом.

Вам следует изменить html на это:

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

И добавьте немного CSS, я уже сделал это для вас, проверьте здесь .

В основном вы скроете исходный флажок и создадите совершенно новый, к которому вы можете применить любой стиль, какой хотите.

EDIT:

Я не хочу, чтобы флажок был красным. Я хочу, чтобы все было нормально, пока я не нажму кнопку "Wirksamkeit". Затем он должен стать красным, если значение флажка недействительно - Simon Rechermann

Новый код , это изменение при отправке и предотвращение отправки формы, если флажок не установлен .

Answer 2

Невозможно задать стиль для флажка напрямую, но вы можете применить стиль к метке. Под этикеткой красного цвета, если не установлен нужный флажок. Стилизация не применяется, если флажок не установлен.

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>