Как изменить стиль required?

Question

[Renat871]

всем привет!
Я хочу сделать так, что б когда не заполненое поле (тоесть атрибут required), то оно тряслось.
У меня есть не большой код

<form id="signin" method="" action="" autocomplete="off">
              <input type="text" id="user" name="user" placeholder="username" required />
              <input type="password" id="pass" name="pass" placeholder="password" required
              <button type="submit">&#xf0da;</button>
            </form>

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

#signin input:required{
}

и я хожу вокруг да около.
надо сделать так что б когда заполненое поле и нажимают на кнопку подтвердить оно тряслось. заранее спасибо.

Comments

[Евгений Старцев]

А на js не пробовал это реализовать?

[Ankhena]

При нажатии на кнопку, js'ом проверяют валидность. Если false, то добавляют класс shake.

[Дима]

Тут описано как на JS сделать
https://stackoverflow.com/questions/30652207/shake...

на css вряд ли такое можно, обычно делают селектор по наличию placeholder
https://css-tricks.com/almanac/selectors/p/placeho...

Answer 1

[Alex]

https://developer.mozilla.org/ru/docs/Web/CSS/:invalid

Comments

[Дима]

в этом случае анимация сразу сработает, как появится поле, поэтому так себе вариант. А автору нужно чтобы срабатывала после нажатия кнопки.