0

Хочу сделать валидацию данных на JS перед отправкой на сервер. И если данные в каком-то инпуте не прошли валидацию, то этот инпут должен резко окрашиваться в красный (background-color: #f44336) и в течение 1 секунды плавно перетекать в белый.

Как реализовать такую анимацию в CSS3?

2 ответа 2

1

input {
  color: red;
  animation-name: noValid;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes noValid {
  from {
    color: red;
  }
  to {
    color: black;
  }
}
<input type="text" name="a" value="not valid">

Только в твоем случае, нужно сделать некий класс error и вешать его на инпут в случае ошибки

0

$("button").click(function(){
  $(".test").addClass("error");
  setTimeout(function(){
    $(".test").removeClass("error");
  },1);
});
.test{
  transition:background 1s;
  background-color: #fff;
}
.test.error{
  transition:background 0s;
  background-color: #f44336;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<input type="text" class="test"><br>
<button>click</button>

1
  • пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 15 мар 2020 в 16:33

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.