JSFiddle - React, Tailwind, and code Playground

by napy84

HTML

<form>
    	<input type="email" value="" placeholder="type invalid email here">
    	<input type="submit">
    </form>

JavaScript

[].forEach.call( document.querySelectorAll('[type="email"]'), function(emailElement) {
   		emailElement.addEventListener('invalid', function() {
				var message = this.value + ' is not a valid email address';
     		emailElement.setCustomValidity(message)
  		}, false);

  		emailElement.addEventListener('input', function() {
    		try{emailElement.setCustomValidity('')}catch(e){}
  		}, false);
		});