JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
  <div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <input id="email" type="email" class="validate">
          <label for="email">Email</label>
          <span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
        </div>
        <a class="waves-effect waves-light btn" onclick="click()">button</a>
      </div>
    </form>
  </div>

JavaScript

$(".waves-effect").click(function(){
if ($("#email").hasClass("invalid") && $("#email").val("")){
alert("gagal")
} else {
alert("berhasil")
}
})