Input Type - Validation Message

by giacal

HTML

<ul id="errors">
</ul>
<form>
    <input type="checkbox" id="giorno"><label for="giorno"> &Egrave; marted&igrave;?</label> 
    <label for="nome_utente"> Nome Utente<br/>
    <input type="text" name="nome_utente" id="nome_utente" required>
</label>
<label for="email"> Email<br/>
    <input type="email" id="email" title="utilizza un indirizzo email valido" required><br>
</label>
<label for="website"> Www<br/>
     <input type="url" id="website" title="utilizza un url valido" required><br>
</label>
<label for="data"> Data preferita per il sopralluogo<br/>
    <input type="date" name="data" id="date"><br>
</label>    
<label for="messaggio" required>Messaggio<br/>
    <textarea name="messaggio" id="messaggio"></textarea>
</label> 
<input type="submit" value="invia">
</form>

CSS

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

/*input[type=checkbox]{
    display:none;
}*/

input:valid{
    border:1px solid green;
}
input:invalid{
    border:1px solid red;
}
input[type=checkbox] + label{
    color:red;
}
input[type=checkbox] + label:after{
    content: ' No ';
}
input[type=checkbox]:checked + label:after{
   content: ' Sì ';
}
input[type=checkbox]:checked + label{
   color : green;
}

JavaScript

document.querySelector('form').addEventListener('invalid', function(e){
    console.log(e.target.validationMessage,e.target.getAttribute('title'));
               document.querySelector('ul').insertAdjacentHTML('beforeend',e.target.getAttribute('title')+"; ");
},true);