JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<form>
    <fieldset>
        <legend>Dati Anagrafici</legend>
        <label for="nome">Nome*</label>
        <input id="nome" type="text" required/><br/>
        <label for="eta">Eta</label>
        <input id="eta" type="number" min="18" max="65"/><br/>
        <label for="email">Email*</label>
        <input id="email" type="email" required/><br/>
        <span>Sesso:*</span><br/>
        <label for="uomo">Uomo</label><input type="radio" name="sesso" id="uomo" required/><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]

https://www.googleapis.com/plus/v1/people/+SandroPaganotti/?key=AIzaSyA00Bh_4YQx34Zc5z_JIlqYQJjNCr2ihV4
-->

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')

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

$('#google').on('input', function(){
    //Chiamata
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');
  });
});