UI2: стилизация для псевдоселекторов :valid и :invalid у полей форм Принято

2

В UI2 есть классы для полей ввода .state-error, .state-success и state-caution . Однако их применение обязывает использовать какой-нибудь js-код для валидации ввода. Это не всегда оправдано и нужно. У полей ввода есть штатные средства типа "required" и разных прочих атрибутов pattern, позволяющих браузеру валидировать ввод. Хотелось бы увидеть стилизацию для псевдоселекторов :valid и :invalid, совпадающих по внешнему виду с .state-success и .state-error соответственно.

Предлагаю добавить правила для .state-valid:valid, state-invalid:invalid и .state-both. Последняя state-both — это комбинация с обоими правилами, и для :valid и для :invalid.

2 комментария

  • +1
    Михаил Ушенин Михаил Ушенин 3 июля 2023 15:24 #

    Мы выпустили обновление фреймворка Webasyst, в котором добавили предложенную стилизацию. Обновление можно установить в «Инсталлере».

    Проверьте, пожалуйста. Сообщите нам, если проблема сохранилась.

    Спасибо вам за то, что помогаете улучшать программные продукты Webasyst!

    • +1
      Syrnik.com Syrnik.com 4 июля 2023 01:09 #

      У стилей для псевдоселекторов :valid и :invalid установлен font-weight отличный от font-weight для обычных полей ввода (во всяком случае в Windows). Из-за этого поля меняют размер при некорректном вводе. На гифке поле типа email

      <input type="email" placeholder="input[type='email']" class="state-invalid" required="">

      Добавить комментарий

      Чтобы добавить комментарий, зарегистрируйтесь или войдите