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="card-content center-align">

			           <div class="input-field formLine form-email col s12 errorForm">
  				          <input id="email" type="email" class="validate" required="" aria-required="true">
  				          <label for="email">Email</label>
  				          <span class="helper-text" data-error="Wrong email" data-success="Right email">input your email</span>
			          </div>
			          <div class="input-field formLine form-order col s12 errorForm">
			            <label for="password">Password </label>
			            <input pattern=".{6,}"   required aria-required="true" title="6 characters minimum" type="password" class="validate order-field" name="password" id="password"/>
			            <span class="helper-text" data-error="Wrong password" data-success="Right password"></span>
			          </div>
	  			        <div class="col s12">
	  				        <input type="submit" class="blue waves-effect waves-light btn-large" style="width: 100%;border-radius: 0;box-shadow: none;" type="submit" name="action" id="submit" value="submit">
	  			        </div> 	

		      </div>

JavaScript

$("#submit").click(function(){
if($("#email").val() == ''){
$(".errorForm").find("input[type=email]:not(.browser)").focus().blur();
}


})