JSFiddle - React, Tailwind, and code Playground

by Alexis López Espinoza

HTML

<form>
	<label>E-mail:</label>
	<input type="text" id="foo" autofocus />
	<span id="bar">Validar</span>
</form>

CSS

#bar{
	padding: 1% 1.5%;
	background-color: green;
	color: white;
	border: .1rem white solid;
	cursor: pointer;
}

#bar:hover{
	filter: brightness(1.2);
	-webkit-filter: brightness(1.2);
	-moz-filter: brightness(1.2);
	-o-filter: brightness(1.2);
}

JavaScript

var foo = document.querySelector("#foo"),
	bar = document.querySelector("#bar");

bar.addEventListener("click", function(){
	if (foo.value.length){
		if (!/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/gi.test(foo.value)){
			alert("Formato no válido");
			foo.focus();
		}
		else{
			alert("Todo está bien");
		}
	}
	else{
		alert("Campo obligatorio");
		foo.focus();
	}
}, false);