JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<div class="form-group not-empty">
  <label for="inputName">Namea</label>
  <span class="error">Data error</span>
  <input type="text" id="inputName" class="form-control" placeholder="John Doe" />
</div>

<div class="form-group not-empty">
  <label for="inputEmail">Email</label>
  <span class="error">Data error</span>
  <input type="email" id="inputEmail" class="form-control" placeholder="[email protected]"/>
</div>

CSS

.error {
  display:none
}
.show {
  display:inline;
}

JavaScript

$("#inputName").keypress(function(){
  var inputName = /^[a-zA-Z ]{2,30}$/; 
  var nameval = $(this).val();
  
  if (nameval == "" || !inputName.test(nameval)){
    $(this).children('.error').addClass('show');
  } else {
    $(this).children('.error').removeClass("show");
  }
});
$("#inputEmail").keyup(function(){
  var inputEmail = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/; 
  var emailval = $(this).val();
  
  if (emailval == "" || !inputEmail.test(emailval)){
    $(this).children('.error').addClass('show');
  } else {
    $(this).children('.error').removeClass("show");
  }
});