JSFiddle - React, Tailwind, and code Playground

by letanure

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.1/pure-min.css">
<link rel="stylesheet" href="http://purecss.io/combo/1.5.4?/css/main.css&amp;/css/rainbow/baby-blue.css">
<form id="meuform" class="pure-form pure-form-aligned">
    <fieldset>
        <div class="pure-control-group">
            <label for="name">Nome</label>
            <input id="name" type="text" placeholder="Nome e sobrenome" required >
        </div>

        <div class="pure-control-group">
            <label for="password">Senha</label>
            <input id="password" type="password" placeholder="Password" required>
        </div>
        
        <p>Campo email oculto com required</p>
        <div class="pure-control-group" hidden>
            <label for="email">Email</label>
            <input id="email" type="email" placeholder="Email Address" required>
        </div>

        <div class="pure-controls">
            <button id="btnEnvia" type="submit" class="pure-button pure-button-primary">Enviar</button>
        </div>
    </fieldset>
</form>

CSS

body{
    background-color: #ddd;
}
form{
    background-color: #fff;
    padding: 2em;
}

JavaScript

var form = document.getElementById('meuform');
document.getElementById('btnEnvia').addEventListener('click', function() {
    if(!form.checkValidity()){
        event.preventDefault();
        alert('Ainda falta algo')
    }

}, false);