JSFiddle - React, Tailwind, and code Playground

by Talsja

HTML

<form id="customer-login">
	<label>Tekst</label>
	<input type="text" required />
	
	<label for="email">email</label>
	<input id="email" name="email"  type="email" required/>
	<button type="submit">Submit</button>
</form>

CSS

form {
    margin-bottom: 20px;
}

JavaScript

$("input[required]").on("invalid", function(e) {

    var msg;
    if(e.target.validity.valueMissing){
      msg = 'Dit is een verplicht veld.';
    }
    if(e.target.validity.typeMismatch){
      msg = 'De invoer in ongeldig';
    }
    e.target.setCustomValidity(msg);
});


/*
$("input[required]").on("invalid", function(e) {

console.log(e);

var target = $(e.currentTarget);
console.log(target);

	this.setCustomValidity("{% trans 'Please fill in this field' %}");
});
*/