JSFiddle - React, Tailwind, and code Playground

by wladyband

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<script src="https://rawgit.com/digitalBush/jquery.maskedinput/1.4.0/dist/jquery.maskedinput.js"></script>
<section class="container">
    <article id="form-section">
        <div class="form-header">
             <h1>Validação do Formulário<h1>
                    </div>
                        <form id="formH2H" action="" >
                            <div class="nmb">1</div>
                            <h3 class="title-sec">Preencha corretamento os campos.</h3>
                                <div class="form-bg">

                                    <label for="nome">Nome</label>
                                    <input id="nome" name="nome" type="text">   

                                    <label for="email">Email</label>
                                    <input name="email" type="email"> <br>

                                    <label for="fone">Telefone</label>
                                    <input id="fone" name="fone" type="text">  

                                    <label for="cpf">CPF</label>
                                    <input id="cpf" name="cpf" type="text">    <br>  <br>

                                    <label for="cep">CEP</label>
                                    <input type="text" value="" id="cep"/><input type="button" id="getEndereco" value="Pesquisar CEP"/><br/>
                                    <p id="loadingCep"></p>

                                    <label for="cidade">Cidade</label>
                                    <input type="text" readonly="readonly" id="cidade"/><br/>

                                    <label for="estado">Estado</label>
                                    <input type="text" readonly="readonly" id="estado"/>

                                    <label for="data">Data</label>
                                    <input id="data" class="data" type="text" name="date" >   

                 ...

CSS

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
 body {
    background:#89D9F2;
}
#form-section {
    background:#fff;
    border-radius: 10px 10px 0 0;
    width:60%;
}
#form-section .form-header {
    background: linear-gradient(#187692, #105672) repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #fff;
    padding: 9px 51px;
    border-radius: 10px 10px 0 0;
}
#form-section .nmb {
    background: none repeat scroll 0 0 #00b0df;
    border: 5px solid #fff;
    border-radius: 30px;
    color: #fff;
    font-weight: 900;
    height: 35px;
    left: -16px;
    padding: 2px 7px;
    position: relative;
    top: 48px;
    width: 35px;
}
#form-section .form-bg {
    background: none repeat scroll 0 0 #f1f1f1;
    border-radius: 10px;
    margin: auto;
    padding: 30px;
    position: relative;
    width: 80%;
}
#form-section label {
    font-weight: 100;
}
#form-section input {
    border-color: #dfdfdf #fff #fff #dfdfdf;
    border-radius: 5px;
    border-style: solid;
    border-width: 2px;
    height: 31px;
    width: 100%;
    margin-bottom:20px;
}
#form-section .title-sec {
    color: #006faf;
    font-size: 1.5em;
    font-weight: 100;
    margin-left: 70px;
}
input.error {
    box-shadow: red 0 0 5px;
}
input.sucess {
    box-shadow:green 0 0 5px;
}

JavaScript

// MASCARAS
jQuery(function ($) {
    $("#data").mask("99/9999", {
        completed: function () {
            console.log('complete')
            var value = $(this).val().split('/');
            var maximos = [31, 12, 2100];
            var novoValor = value.map(function (parcela, i) {
                if (parseInt(parcela, 10) > maximos[i]) return maximos[i];
                return parcela;
            });
            if (novoValor.toString() != value.toString()) $(this).val(novoValor.join('/')).focus();
        }
    });

    $("#fone").mask("(99) 9999-9999");
    $("#cpf").mask("999.999.999-99");
    $("#cep").mask("99.999-999");
});
// ADICIONANDO METHOD DE DATA NO VALIDATION
$.validator.addMethod("data", function (value, element) {
    return value.match(/^\d\d?\/\d\d\/\d\d\d\d$/);
    return this.optional(element) || retorno;
},
    "Por favor, informe uma data válida"

);




// ADICIONANDO METHOD DE CPF NO VALIDATION
jQuery.validator.addMethod("cpf", function (value, element) {
    value = jQuery.trim(value);
    value = value.replace('.', '');
    value = value.replace('.', '');
    cpf = value.replace('-', '');
    while (cpf.length < 11) cpf = "0" + cpf;
    var expReg = /^0+$|^1+$|^2+$|^3+$|^4+$|^5+$|^6+$|^7+$|^8+$|^9+$/;
    var a = [];
    var b = new Number;
    var c = 11;
    for (i = 0; i < 11; i++) {
        a[i] = cpf.charAt(i);
        if (i < 9) b += (a[i] * --c);
    }
    if ((x = b % 11) < 2) {
        a[9] = 0
    } else {
        a[9] = 11 - x
    }
    b = 0;
    c = 11;
    for (y = 0; y < 10; y++) b += (a[y] * c--);
    if ((x = b % 11) < 2) {
        a[10] = 0;
    } else {
        a[10] = 11 - x;
    }

    var retorno = true;
    if ((cpf.charAt(9) != a[9]) || (cpf.charAt(10) != a[10]) || cpf.match(expReg)) retorno = false;

    return this.optional(element) || retorno;

}, "Informe um CPF válido");



// FUNÇÃO BUSCAR O CEP
function getEndereco(cep) {
    if ($.trim(cep) != "") {
       ...