JSFiddle - React, Tailwind, and code Playground

input error focus test

by Travis Almand

HTML

<button id="error">
error
</button>
<div>
  <input />
  <div class="message1">message</div>
</div>
<div>
  <input id="message2" />
  <div class="message2"><span>message</span></div>
</div>
<div>
  <input />
  <div class="message3">message</div>
</div>

CSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

button {
  display: block;
  margin-bottom: 20px;
}
div {
  margin: 10px 0;
  position: relative;
}

input {
  display: block;
}
input.error {
  border: 2px solid red;
}

.message1 {
  display: none;
}
input.error:focus + .message1 {
  display: block;
}

.message2 {
  height: 0;
  margin: 0;
  overflow: hidden;
  transition: all 0.5s;
}
.message2 span {
  background: #fff;
  border: 1px solid red;
  border-radius: 4px;
  display: inline-block;
  padding: 0 20px;
}
input.error:focus + .message2 {
  height: 34px;
  margin: 10px 0;
}

.message3 {
  background: #fff;
  border: 1px solid red;
  border-radius: 4px;
  left: 10px;
  margin: 0;
  opacity: 0;
  padding: 10px 30px;
  position: absolute;
  top: -50px;
  transform: scale3d(1, 1, 0);
  transition: opacity 0.25s, transform 0s 0.25s;
}
.message3:after {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #f00;
  bottom: -5px;
  content: '';
  display: block;
  height: 0;
  left: 10px;
  position: absolute;
  width: 0;
}
input.error:focus + .message3 {
  opacity: 1;
  transform: scale3d(1, 1, 1);
  transition: opacity 0.25s;
}

JavaScript

var $errorBtn = document.querySelector('#error');
var $inputs = document.querySelectorAll('input');
var $message2 = document.querySelector('.message2');
var $message2Input = document.querySelector('#message2');
var $message2Span = document.querySelector('.message2 span');

$errorBtn.addEventListener('click', function() {
  for (var i = 0; i < $inputs.length; i++) {
  	$inputs[i].classList.toggle('error');
  }
});