Lezione 3

ESERCIZIO: Completare la form aggiungendo i necessari controlli di validazione

by beatricevivaldi

HTML

<form>
    <fieldset>
        <legend>Dati Anagrafici</legend>
        <label for="nome" required/>Nome*</label>
        <input id="nome" type="text"/><br/>
        <label for="eta">Eta</label>
        <input id="eta" type="number" min="18" max="65"/><br/>
        <label for="email" required/>Email*</label>
        <input id="email" type="email"/><br/>
        <span>Sesso:*</span><br/>
        <label for="uomo" required/>Uomo</label><input type="radio" name="sesso" id="uomo"/><br/>
        <label for="donna">Donna</label><input type="radio" name="sesso" id="donna"/><br/>
    </fieldset>
    <fieldset>
        <legend>Dati di Gioco</legend>
        <label for="nome">Username*</label>
        <input id="nome" type="text" pattern="[^\s]+" required/><br/>
    </fieldset>
    <fieldset>
        <legend>Dati di Profilo</legend>
        <label for="nome">Google+</label>
        <input id="google" type="text"/><br/>
    </fieldset>
    <input type="submit" value="Registrati"/>
</form>

<!-- 
* tutti i campi con l'* sono obbligatori
* l'eta può essere solo numerico, tra 18 e 65
* lo username non può contenere spazi
* l'email deve essere una email valida
* bordo rosso ai campi invalidi ma soltanto dopo il primo submit
* validare che l'id di profilo Google+ sia esistente [difficile]
-->

CSS

label{
    display: inline-block;
    min-width: 100px;
}
fieldset{
    margin: 10px;
}

.redBorder :invalid {
    border: 1px solid red;
}

JavaScript

//$.get('http://www.sandropaganotti.com/wp-content/goodies/misc/usernames.php')

//le form sono viste anche come un array, se metto 0 prendo la prima, se metto anche .elements torna tutti gli elementi della form

document.forms[0].addEventListener('invalid', function(){
   // alert('campo invalido');
    $('form').addClass('redBorder');
},
true);

$('#google').on('input', function(){
    var self=this;
    $.get('https://www.googleapis.com/plus/v1/people/'+this.value+'/?key=AIzaSyA00Bh_4YQx34Zc5z_JIlqYQJjNCr2ihV4', function(){
        self.setCustomValidity('')
    }).fail(function() {
        self.setCustomValidity("utente non valido");
    });

});