Validation Message Sandro - Paganotti

by giacal

HTML

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

<form action="#">
    <label for="nome_utente"> Nome Utente<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"> Email<br/>
    <input type="email" name="email" id="email" placeholder="eg: [email protected]" title="Inserisci una email valida" required>
</label>
<label for="website"> Www<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"> Messaggio<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

/*Vedere www.html5rocks.com; html5doctor.com; lea.verou.me*/

document.forms[0].addEventListener('invalid', handleInvalid, true);

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

function handleInvalid(evt){
    var elem = evt.target,
        elem_id = elem.getAttribute('id'),
        label = document.querySelector('label[for="'+ elem_id +'"]'),
        label_txt = label.textContent;
    
    ul.insertAdjacentHTML('beforeend', "<li><strong>" + label_txt + ":</strong> " + elem.validationMessage + "<br>" + (elem.getAttribute('title') || ""));

    evt.preventDefault();                          
}