Пользовательские флажки не работают с обязательным тегом - PullRequest
Новая
       29

Пользовательские флажки не работают с обязательным тегом

0 голосов
/ 02 апреля 2019

У меня есть несколько флажков, которые я хотел бы, чтобы клиент поставил галочку / отметку перед тем, как форма будет успешно отправлена.Я добавил required к тегу <input> и перед тем, как настроить флажки, он работает, как и ожидалось, с всплывающим предупреждением.

Однако после настройки флажков я больше не получаю необходимое всплывающее предупреждение.Есть идеи, что я здесь не так сделал?

изображение настроенных флажков

HTML 

<label class="label" for="radio-6">
  <input class="checkbox" id="radio-6" type="checkbox" required>
  <span class="custom-checkbox" role="checkbox" aria-checked="false" aria-labelledby="radio-6"></span>
  <span class="checkbox-text">Example text</span>
</label>

CSS / SASS 

.label {
   display: block;
   position: relative;
   user-select: none;
   cursor: pointer;
}

.label input {
   position: absolute;
   opacity: 0;
   height: 0;
   width: 0;
}

.custom-checkbox {
   position: absolute;
   border-radius: 50%;
   top: 50%;
   left: 0;
   transform: translateY(-50%);
   width: 24px;
   height: 24px;
   background-color: $white;
   border: solid 1px $f-color;

   &:after {
      content: "";
      position: absolute;
      display: none;
   }
}

.label input:checked ~ .custom-checkbox {
   background-color: $white;
   border: solid 1px $p-color;
}

.label input:checked ~ .custom-checkbox:after {
   display: block;
}

.label .custom-checkbox:after {
   left: 12px;
   top: -8px;
   width: 7px;
   height: 22px;
   border: solid $p-color;
   border-width: 0 3px 3px 0;
   -webkit-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);
}
...