Validação de formulario

by Jader Wagner

HTML

<h1>A Simple HTML5 Form Validation</h1>

<p>Leave the field empty and submit the form to see what happens.</p>
<form>
    <div>
        <label for="name">* Nome</label>
        <input type="text" id="nome" data-erro="Preencha seu nome">
    </div>
    <div>
        <label for="name">* E-mail</label>
        <input type="text" id="email" data-erro="Preencha seu e-mail">
    </div>
    <div>
        <label for="name">Telefone</label>
        <input type="text" id="telefone" class="nao-obrigatorio">
    </div>
    <div>
        <label for="name">Celular</label>
        <input type="text" id="email" class="nao-obrigatorio">
    </div>
    <div>
        <label for="name">* Endereco</label>
        <input type="text" id="endereco">
    </div>
    <div>
        <label for="name">* Cidade</label>
        <input type="text" id="cidade">
    </div>
    <div>
        <label for="name">* Estado</label>
        <input type="text" id="estado">
    </div>
    <div>
        <label for="name">* Pais</label>
        <input type="text" id="Pais">
    </div>
    <input type="submit" value="Submit">
</form>

CSS

body {
    margin: 1em;
}
footer {
    margin-top: 2em;
}
div {
    margin: 50px;
    padding: 20px;
}
.erro {
    border: 2px dashed red;
}
.msg-erro {
    color:red;
}

JavaScript

$("form").submit(function (event) {
    event.preventDefault();
    var erro = false;
    var elemento;

    // limpar marcação de erro da tentativa anterior:
    $('form div').removeClass('erro');
    $('.msg-erro').remove();

    // percorrer todos os input e verificar se estão em branco ou não
    $(this).find('input:not(.nao-obrigatorio)').each(function () {
        if ($(this).val() == '') {
            erro = true;
            elemento = $(this);
            return false;
        }
    });
    
    // aqui pode adicionar outras verificações especifica como combos ou checkbox.
    // definir erro = true e elemento = ao elemento causador do erro.

    if (erro == true) {
        elemento.parent('div').addClass('erro').append((elemento.data('erro') ? '<span class="msg-erro">'+elemento.data('erro')+'</span>' : ''));
        $('html, body').animate({
            scrollTop: elemento.offset().top - 100
        }, 500);
    } else {
        // não tem nenhum erro, fazer os procedimentos de envio
        alert('Formulario enviado!');
    }
});