Блог

Главная - Вопросы по программированию - Плавающая проверка в html

Плавающая проверка в html

#html #jquery #validation #floating

Вопрос:

Я попытался создать форму плавающей проверки, как на одном из веб-сайтов, где она работает, но изображение с правой стороны зеленого/красного цвета не отображается. Для этого я попробовал код.

 <html>
<head></head>


<body>

<div id="form_validation_c" class="form-wrap">
    <form action="#submit" method="post" class="validate go-bottom">

      <!-- First name -->
      <div class="column half">
          <input type="text" id="firstname" name="firstname" required />
        <label for="firstname">
          Your First Name
        </label>
      </div>

      <!-- Last Name -->
      <div class="column half last">
        <input type="text" id="lastname" name="lastname" required />
        <label for="lastname">
          Your Last Name
        </label>
      </div>
 
      <!-- Submit -->
      <div class="column submit">
        <button type="submit" id="submit" name="submit" class="btn_blue">Submit</button>
      </div>

    </form>
  </div>
  
</body>
</html>

Не могли бы вы, пожалуйста, предложить нам показать зеленое/красное изображение с правой стороны текстового поля на основе проверки?

Ответ №1:

Вы также можете добиться этого с помощью анимации .

Предоставленная анимация действительна input , вы можете изменить стиль в соответствии с потребностями . Вот только демонстрационная версия

 input {
  border: 2px solid;
  border-radius: 4px;
  font-size: 1rem;
  margin: 0.25rem;
  min-width: 125px;
  padding: 0.5rem;
  transition: background-color 0.5s ease-out;
  position: relative;
}

input:required:valid {
  background: url("https://assets.digitalocean.com/labs/icons/hand-thumbs-up.svg") no-repeat 95% 50% lightgreen;
  background-size: 25px;
  animation: bgFloat 0.5s linear
}

@keyframes bgFloat {
  0% {
    background-position: left center;
  }
  100% {
    background-position: right center;
  }
} 
 <html>

<head></head>


<body>

  <div id="form_validation_c" class="form-wrap">
    <form action="#submit" method="post" class="validate go-bottom">

      <!-- First name -->
      <div class="column half">
        <input type="text" id="firstname" name="firstname" required />
        <label for="firstname">
          Your First Name
        </label>
      </div>

      <!-- Last Name -->
      <div class="column half last">
        <input type="text" id="lastname" name="lastname" required />
        <label for="lastname">
          Your Last Name
        </label>
      </div>

      <!-- Submit -->
      <div class="column submit">
        <button type="submit" id="submit" name="submit" class="btn_blue">Submit</button>
      </div>

    </form>
  </div>

</body>

</html>
Метки: