JSFiddle - React, Tailwind, and code Playground

by Talsja

HTML

<form method="post" action="" id="validation">
	Name:<input type="text" id="nome" name="nome" required="required" requiredmessage="Name is required." /><br />
	E-mail:<input type="email" id="email" name="email" required="required" requiredmessage="A valid E-mail address is required." pattern="^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9]+$" /><br />
	Password:<input type="password" id="nomne" name="nonme" required="required" requiredmessage="Wachtwoor is required." /><br />
	<br /><br />

	<input type="submit" value="Enviar" />
</form>

JavaScript

$(document).ready(function()
		{
			$('input[required], input[required="required"]').each(function(i, e)
			{
				e.oninput = function(el)
				{
					el.target.setCustomValidity("");
					
					if (el.target.type == "email")
					{
						if (el.target.validity.patternMismatch)
						{
							el.target.setCustomValidity("E-mail format invalid.");
							
							if (el.target.validity.typeMismatch)
							{
								el.target.setCustomValidity("An e-mail address must be given.");
							}
						}
					}
				};
				
				e.oninvalid = function(el)
				{
					el.target.setCustomValidity(!el.target.validity.valid ? e.attributes.requiredmessage.value : "");
				};
			});
			
			// Some extra validation at the form submit
			$("#validation").on("submit", function(e)
			{
				for (var i = 0; i < e.target.length; i++)
				{
					if (!e.target[i].validity.valid)
					{
						window.alert(e.target.attributes.requiredmessage.value);
						e.target.focus();
						return false;
					}
				}
			});
		});