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>

<div class="form-group not-empty">
  <label for="inputHandphone">No Handphone</label>
  <span class="error">Data error</span>
  <input type="number" id="inputHandphone" class="form-control" placeholder="0812xxxxx"  />
</div>

CSS

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

JavaScript

$(".not-empty").keyup(function(){
  // var phoneno = /\+?([ -]?\d+)+|\(\d+\)([ -]\d+)/;
  var inputName = /^[a-zA-Z ]{6,30}$/;
  var inputEmail = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;
  var childVal = $(this).children('input').val()
  var childName =  $(this).children('#inputName')
  var childEmail =  $(this).children('#inputEmail')

  
  var regexTest = function () {
  	return childName.length ? !inputName.test(childName.val()) : !inputEmail.test(childEmail.val())
  }
  
  if (childVal == "" || regexTest()){
    $(this).children('.error').addClass('show');
  } else {
    $(this).children('.error').removeClass("show");
  }
})