Formulário campos obrigatórios

by cintia_rodrigues

HTML

<label for="primeiroNome">* Nome</label><br/>
<input id="primeiroNome" name="primeiroNome" data-obrigatorio="sim" data-mensagemerro="Nome inválido">

<br/>
    
<label for="apelido">Apelido</label><br/>
<input id="apelido" name="apelido" data-obrigatorio="nao">
<br/>
    
<label for="email">* Email</label><br/>
<input id="email" name="email" data-obrigatorio="sim" data-mensagemerro="email inválido">
<br/>
<br/>
<a href="javascript:;" class="botaoEnviar">Enviar</a>    
 <div class="estadoDoEnvio"></div>

CSS

.botaoEnviar
{
    display: block;
    width: 127px;
    height: 20px;
    color: #fff;
    text-decoration: none;
    background-color: #000;
    text-align: center;
    line-height: 20px;
}

JavaScript

$(document).ready(function(){
    
    // CLick do botao
    $('.botaoEnviar').click(function(){
        // no click executa a funçao que valida e verifica o estado
       
        if(validaFormulario())
        {
            // se a funcção for true quer dizer que não há erros de preenchimento e executa o que está neste if
            // neste caso vamos enviar os dados para um php através de jquery e receber a resposta
            $.ajax({
              type: "POST",
              url: "form.php",
              data: { primeiroNome: $('input[name=primeiroNome]').val(), apelido:$('input[name=apelido]').val(),email:$('input[name=email]').val()},
              dataType: "html"
            }).done(function( msg ) {
              // msg é o resultado que vem do php que podemos escrever no div de status
                $('.estadoDoEnvio').html(msg);
            });
            
        }
    })
})

function validaFormulario()
{
    var estado = true;
    // variável que vai armazenar os erros
    var erros = "";
    $('input').each(function(){
        // verifica se o data-obrigatorio é igual a sim
        if($(this).data('obrigatorio') == "sim")
        {
            // verifica se o comprimento da string é maior que 2
            if($(this).val().length < 2)
            {
                estado = false;
                erros += $(this).data('mensagemerro')+"<br/>";
            }
        }
    })
    $('.estadoDoEnvio').html(erros);
    return estado;
}