JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <div>
    <label>Email:
      <input name=email type=email required title="enter your email">
    </label>
    <input type=submit>
    </div>
  </form>

JavaScript

var f = document.querySelector('form');
var d = document.querySelector('div');
var i = document.querySelector('input[required]');

f.addEventListener('submit', function(e){
  //checkValidity returns a boolean
  if (this.checkValidity()){
    f.style.backgroundColor = 'green';
    alert('woooo');
    e.preventDefault();
  } else {
    f.style.backgroundColor = 'red';
    alert(i.getAttribute('title'));
    e.preventDefault();
  }
});