JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<div class="info_message asterisk long form_text_input">
  <div class="label">
    <label for="first_name">First Name</label>
  </div>
  <div class="form-input-container">
    <input type="text" name="first_name" id="first_name" class="owner-info-modal-form__field is-required">
  </div>
</div>

<div class="info_message asterisk long form_text_input">
  <div class="label">
    <label for="first_name">First Name</label>
  </div>
  <div class="form-input-container">
    <input type="text" name="first_name" id="first_name" class="owner-info-modal-form__field is-required">
  </div>
</div>

<div class="info_message asterisk long form_text_input">
  <div class="label">
    <label for="first_name">First Name</label>
  </div>
  <div class="form-input-container">
    <input type="text" name="first_name" id="first_name" class="owner-info-modal-form__field is-required">
  </div>
</div>

CSS

.has-error {
  border: 1px solid red
}

JavaScript

console.clear()

const closest = (el, selector) => {
  let selectedElement = null;
  while (el) {
    if (el.matches(selector)) {
      selectedElement = el;
      break
    }
    el = el.parentElement;
  }
  return selectedElement;
}

var inputs = document.querySelectorAll('.is-required')

inputs.forEach(input => {
	console.log(input)
  input.addEventListener('blur', () => {
    var close = closest(input, '.info_message')
		close.classList.add('has-error')
  })
})