JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<ul id="errors">
    
</ul>

<form action="#">
    <label for="nome_utente"> <span>Nome Utente</span><br/>
    <input pattern="^[a-z_]{4,8}$" type="text" name="nome_utente" id="nome_utente" placeholder="eg: sandro_p" title="il campo accetta solo valori alfabetici e l'underscore _, tra 4 e 8 caratteri" required>
</label>
<label for="email"> <span>Email</span><br/>
    <input type="email" name="email" id="email" placeholder="eg: [email protected]" title="Inserisci una email valida" required>
</label>
<label for="website"> <span>Www</span><br/>
    <input type="url" name="website" id="website" title="Inserisci un sito web valido" placeholder="eg: www.sandropaganotti.com">
</label>
<label for="data"> Data preferita per il sopralluogo<br/>
    <input type="date" name="data" id="data">
</label>    
<label for="messaggio"> <span>Messaggio</span><br/>
    <textarea required name="messaggio" id="messaggio" placeholder="il tuo essaggio"></textarea>
</label> 
<input type="submit" value="invia">
</form>

CSS

label{
    display: block;
    margin-top: 10px;
}

JavaScript

var form = document.querySelector('form');

form.addEventListener('invalid', function(evt){
    evt.preventDefault();
    evt.stopPropagation();
    var elem = evt.target;
    var elementLabel = document.querySelector('label[for=' + elem.id + '] span');
   elementLabel.innerHTML = 'hello';
   console.log(elem.validationMessage);
}, true);