validar ao digitar, com validate jquery

marcelocardoso · Agosto 18, 2016

pessoal!

como posso validar campos do form, ao digitar....sem ter q pressionar o ENVIAR, e assim validar, ok
to usando a biblioteca jquery 3.0 e ultima do validate + bootstrap 3.0.7

se tiverem exemplo, agradeço.
obrigado.

gabrieldarezzo · Agosto 18, 2016

Vamos esquecer um pouco 'boostrap' ou plugin 'ultimate fucking validate'....

O JavaScript pode monitorar eventos, nesse caso podemos monitorar qualquer entrada de valor por input (teclado por exemplo....)

Depende muito do que você pretende validar e da regra da mesma.

Ex: E-mail para ser considerado valido precisa de um '@'...

(Da para fazer só Client-Side)

Ex²: Um e-mail não pode ser duplicado (apenas um registro na base)

(Só utilizando uma consulta na Base de dados da sua aplicação para garantir que é UNIQUE, nesse caso podemos monitorar o foco do campo e ao sair do foco "blur" fazemos uma consulta em ajax garantindo a unicidade do email)

Enfim só um exemplo mesmo.

Validação de formulário na web com JS é oq você mais vai encontrar, só dar um Google.

Caso tenha interesse em aprender mais sobre JS, tem um repo no meu GitHub com alguns exercícios:

https://github.com/gabrieldarezzo/helpjs-ravi

Abraços.

marcelocardoso · Agosto 25, 2016

olá...

estou usando este código jq validate.
ele só valida após foco do campo, e só passa a validar em tempo de execução, digitação no campo INPUT, após a primeira amostra de erro.

tipo: se digito um email no campo, errado, ele só vai apresentar erro ao pular o campo, sair do mesmo.
tipo: ele só apartir daí começa a validar em tempo real o mesmo, o email, se coloco .... ou @@@ a mais...

segue meu código:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Makes "field" required and an email address.</title>
    <link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script>
    <script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

    <div class="container">
        <div class="col-md-12 center-block" style="padding-top: 30px; padding-bottom: 30px;">
            
            <h1 class="center-block text-center"> Teste de Validate | OnFocusOut </h1><br><br>
            
            <form class="form-group" id="formulario">

                <div class="row" style="padding: 10px;">
                    <div class="col-md-2">
                        <label for="nome">Nome: </label>
                    </div>
                    <div class="col-md-10">
                        <input class="form-control" id="nome" name="nome">
                    </div>
                </div>

                <div class="row" style="padding: 10px;">
                    <div class="col-md-2">
                        <label for="email">Email: </label>
                    </div>
                    <div class="col-md-10">
                        <input class="form-control" id="email" name="email">
                    </div>
                </div>

                <div class="row" style="padding: 10px;">
                    <div class="col-md-2">
                        <label for="telefone">Telefone: </label>
                    </div>
                    <div class="col-md-10">
                        <input class="form-control" id="telefone" name="telefone">
                    </div>
                </div>

                <div class="row" style="padding: 10px;">
                    <div class="col-md-2">
                        <label for="celular">Celular: </label>
                    </div>
                    <div class="col-md-10">
                        <input class="form-control" id="celular" name="celular">
                    </div>
                </div>

                <div class="row" style="padding: 10px;">
                    <div class="col-md-2">
                        <label for="senha">Senha: </label>
                    </div>
                    <div class="col-md-10">
                        <input class="form-control" id="senha" name="senha">
                    </div>
                </div>

                <div class="row" style="padding: 10px;">
                    <div class="col-md-2">
                        <label for="senhaconfirma">Senha: </label>
                    </div>
                    <div class="col-md-10">
                        <input class="form-control" id="senhaconfirma" name="senhaconfirma">
                    </div>
                </div>

                <br/>
                <input class="btn btn-xs btn-primary" type="submit" value="Validate!">

            </form>
        </div>
    </div>
    <script language="javascript">
        jQuery.validator.setDefaults({
            debug: true,
            success: "valid"
        });
        $('#formulario').validate({
            onfocusout: function(element) {
                $(element).valid();
            },
            rules: { /*REGRAS DO VALIDATE */
                nome: {
                    required: true,
                    minlength: 5,
                    maxlength: 25
                },
                email: {
                    required: true,
                    email: true
                },
                telefone: {
                    required: true,
                    minlength: 8,
                    maxlength: 10
                },
                celular: {
                    required: true,
                    minlength: 8,
                    maxlength: 10
                },
                endereco: {
                    required: true,
                    minlength: 5
                },
                estado: {
                    required: true,
                    minlength: 2
                },
                cidade: {
                    required: true,
                    minlength: 2
                },
                cep: {
                    required: true,
                    minlength: 4,
                    maxlength: 4
                },
                usuario: {
                    required: true,
                    minlength: 4
                },
                senha: {
                    required: true,
                    minlength: 4,
                    maxlength: 10
                },
                senhaconfirma: {
                    equalTo: "#senha"
                },
                termos: {
                    required: true
                }
            },
            /*onkeyup: false,*/
            messages: { /*MENSAGENS DO VALIDATE */
                nome: {
                    required: "Digite corretamente seu Nome ",
                    minlength: "Mínimo de caracteres permitidos 5",
                    maxlength: "Maxímo de caracteres permitidos 25"
                },
                celular: {
                    required: "Digite corretamente seu Celular",
                    minlength: "Mínimo de caracteres permitidos 8",
                    maxlength: "Maxímo de caracteres permitidos 10"
                },
                email: "Digite um email válido",
                telefone: {
                    required: "Digite corretamente seu Celular",
                    minlength: "Mínimo de caracteres permitidos 8",
                    maxlength: "Maxímo de caracteres permitidos 10"
                },
                endereco: {
                    required: "Digite corretamente seu Celular",
                    minlength: "Mínimo de caracteres permitidos 10",
                    maxlength: "Maxímo de caracteres permitidos 50"
                },
                cidade: {
                    required: "Digite corretamente seu Celular",
                    minlength: "Mínimo de caracteres permitidos 10",
                    maxlength: "Maxímo de caracteres permitidos 20"
                },
                estado: {
                    required: "Digite corretamente seu Celular",
                    minlength: "Mínimo de caracteres permitidos 2",
                    maxlength: "Maxímo de caracteres permitidos 20"
                },
                cep: {
                    required: "Digite corretamente seu Celular",
                    minlength: "Mínimo de caracteres permitidos 10",
                    maxlength: "Maxímo de caracteres permitidos 11"
                },
                usuario: {
                    required: "Digite corretamente seu Celular",
                    minlength: "Mínimo de caracteres permitidos 8",
                    maxlength: "Maxímo de caracteres permitidos 10"
                },
                senha: {
                    required: "Digite corretamente seu Celular",
                    minlength: "Mínimo de caracteres permitidos 8",
                    maxlength: "Maxímo de caracteres permitidos 10"
                },
                senhaconfirma: {
                    equalTo: "As senhas não conferem, redigite!"
                },
                termos: {
                    required: "Por gentileza, aceite os termos"
                }
            }
        });
    </script>


</body>

</html>

Preciso que ao digitar, ele pegue as configurações das RULES, e vá em tempo de execução, ou seja, digitando: verificando, não após pular de campo...

Tem como com eventos Onblur, OnFocus ou KeyPress.
Tentei com eles, mas não consegui...

Se souberem de exemplos, agradeço.

Obrigado.

marcelocardoso · Agosto 26, 2016

colegas...
a modo de estudo, ta aí um script que valida em tempo real, demorei, e consegui sozinho.
vale para estudo e implantação...
obrigado mesmo assim a todos...

<!doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.1/jquery.inputmask.bundle.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            $("#telefone").inputmask({
                mask: ["(99) 9999-9999", "(99) 99999-9999", ],
                keepStatic: true
            });

            $("#celular").inputmask({
                mask: ["(99) 9999-9999", "(99) 99999-9999", ],
                keepStatic: true
            });

            $("#data").inputmask({
                mask: ["99/99/9999", "99/99/9999", {
                    placeholder: "",
                    clearMaskOnLostFocus: true
                }],
                keepStatic: true
            });

            $("#cnpj").inputmask({
                mask: ["99.999.999/9999-99", "99.999.999/9999-99", {
                    placeholder: "",
                    clearMaskOnLostFocus: true
                }],
                keepStatic: true
            });

            $("#cpf").inputmask({
                mask: ["999.999.999-99", "999.999.999-99", {
                    placeholder: "",
                    clearMaskOnLostFocus: true
                }],
                keepStatic: true
            });

            $("#rg").inputmask({
                mask: ["99.999.999-9", "99.999.999-9", {
                    placeholder: "",
                    clearMaskOnLostFocus: true
                }],
                keepStatic: true
            });

            $("#agencia").inputmask({
                mask: ["9999-9", "9999-9", {
                    placeholder: "",
                    clearMaskOnLostFocus: true
                }],
                keepStatic: true
            });

            $("#conta").inputmask({
                mask: ["99.999-9", "99.999-9", {
                    placeholder: "",
                    clearMaskOnLostFocus: true
                }],
                keepStatic: true
            });

            $("#cep").inputmask({
                mask: ["99999-999", "99999-999", {
                    placeholder: "",
                    clearMaskOnLostFocus: true
                }],
                keepStatic: true
            });

            $("#certificadoreservista").inputmask({
                mask: ["(99) 9999-9999", "(99) 99999-9999", {
                    placeholder: "teste",
                    clearMaskOnLostFocus: true
                }],
                keepStatic: true
            });

            $("#tituloeleitor").inputmask({
                mask: ["(99) 9999-9999", "(99) 99999-9999", {
                    placeholder: "",
                    clearMaskOnLostFocus: true
                }],
                keepStatic: true
            });

            $("#passaporte").inputmask({
                mask: ["(99) 9999-9999", "(99) 99999-9999", {
                    placeholder: "",
                    clearMaskOnLostFocus: true
                }],
                keepStatic: true
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            // pular campos, mais simplificado, dá para usar também, mas o de baixo tá funcionando...
            /*                $('#tabela').on('keyup', 'input', function(event) {
                                if (event.which == 13) {
                                    var generico = $("#tabela").find('input:visible');
                                    var indice = generico.index(event.target) + 1;
                                    var seletor = $(generico[indice]).focus();

                                    if (seletor.length == 0) {
                                        event.target.focus();
                                    }
                                }
                            });*/
            // Método para pular campos teclando ENTER
            $('.pulacampos').on('keypress', function(e) {
                var tecla = (e.keyCode ? e.keyCode : e.which);

                if (tecla == 13) {
                    campo = $('.pulacampos');
                    indice = campo.index(this);

                    if (campo[indice + 1] != null) {
                        proximo = campo[indice + 1];
                        proximo.focus();
                        e.preventDefault(e);
                        return false; // impede o envio do formulario
                    }
                }
            });
            // Método para consultar o CEP
            $('#cep').on('blur', function() {

                if ($.trim($("#cep").val()) != "") {

                    $("#infocep").html('Aguarde, estamos consultando seu CEP ...');
                    $.getScript("http://cep.republicavirtual.com.br/web_cep.php?formato=javascript&cep=" + $("#cep").val(), function() {

                        if (resultadoCEP["resultado"]) {
                            $("#rua").val(unescape(resultadoCEP["tipo_logradouro"]) + " " + unescape(resultadoCEP["logradouro"]));
                            $("#bairro").val(unescape(resultadoCEP["bairro"]));
                            $("#cidade").val(unescape(resultadoCEP["cidade"]));
                            $("#estado").val(unescape(resultadoCEP["uf"]));
                        }
                        $("#infocep").html('');
                    });
                }
            });
        });
    </script>
    <style>
        .error .error:after {
            color: red;
            font-size: 12px;
            font-family: "Glyphicons Halflings";
            content: "\e080";
        }
    </style>
</head>

<body>
    <div class="container" style="padding-top: 40px;">
        <div class="col-md-6 col-offset-2">
            <div class="panel panel-primary">
                <div class="panel-heading">VALIDACAO EM TEMPO REAL COM MASCARAS</div>
                <div class="panel-body">
                    <form action="" method="post" id="form_contato" class="form">

                        <div class="" style="background-color: #f2f2f2; padding: 30px;">
                            <div class="form-group">
                                <label for="nome">Nome</label>
                                <input type="text" name="nome" id="nome" required minlength="5" class="form-control pulacampos">
                            </div>

                            <div class="form-group">
                                <label for="email">Email</label>
                                <input type="email" name="email" id="email" required class="form-control pulacampos"></input>
                            </div>

                            <div class="form-group">
                                <label for="telefone">Telefone</label>
                                <input type="text" name="telefone" id="telefone" required class="form-control pulacampos"></input>
                            </div>

                            <div class="form-group">
                                <label for="celular">Celular</label>
                                <input type="text" name="celular" id="celular" required class="form-control pulacampos"></input>
                            </div>
                        </div>
                        <hr>

                        <div class="" style="background-color: #e7c5ff; padding: 30px;">
                            <div class="form-group">
                                <label for="cep">CEP</label>
                                <div class="text-success" id="infocep"></div>
                                <input type="text" name="cep" id="cep" required class="form-control pulacampos"></input>
                            </div>

                            <div class="form-group">
                                <label for="rua">Rua</label>
                                <input type="text" name="rua" id="rua" required class="form-control pulacampos"></input>
                            </div>

                            <div class="form-group">
                                <label for="bairro">Bairro</label>
                                <input type="text" name="bairro" id="bairro" required class="form-control pulacampos"></input>
                            </div>

                            <div class="form-group">
                                <label for="estado">Estado</label>
                                <input type="text" name="estado" id="estado" required class="form-control pulacampos"></input>
                            </div>

                            <div class="form-group">
                                <label for="cidade">Cidade</label>
                                <input type="text" name="cidade" id="cidade" required class="form-control pulacampos"></input>
                            </div>
                        </div>
                        <hr>

                        <div class="" style="background-color: #c8e9ed; padding: 30px;">
                            <div class="form-group">
                                <br>
                                <label for="usuario">Usuario</label>
                                <input type="text" name="usuario" id="usuario" required class="form-control pulacampos"></input>
                            </div>

                            <hr>
                            <div class="form-group">
                                <label for="senha">Senha</label>
                                <input type="password" name="senha" id="senha" required class="form-control pulacampos"></input>
                            </div>

                            <div class="form-group">
                                <label for="senhaconfirma">Senha Confirma</label>
                                <input type="password" name="senhaconfirma" id="senhaconfirma" required class="form-control pulacampos"></input>
                            </div>
                            <hr>

                            <div class="form-group text-center">
                                <label for="termos">Termos</label>
                                <br>
                                <input type="checkbox" name="termos" id="termos" required class=""> Voce aceita todos os termos neste cadastro?</input>
                            </div>
                            <div class="form-group">
                                <label for="mensagem">Mensagem</label>
                                <textarea type="text" name="mensagem" rows="5" id="mensagem" required class="form-control"></textarea>
                            </div>
                        </div>
                        <hr>

                        <div>
                            <input type="submit" class="btn btn-success btn-block" value="ENVIAR" /> </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <script>
        jQuery.validator.setDefaults({
            debug: true,
            success: "valid",
        });
        $("#form_contato").validate({
            // FAZ A VALIDAÇÃO EM TEMPO REAL"
            onkeyup: function(element) {
                this.element(element);
            },
            onfocusout: function(element) {
                this.element(element);
            },
            rules: {
                nome: {
                    required: true,
                    minlength: 7,
                    maxlength: 25
                },
                email: {
                    required: true,
                    email: true,
                    minlength: 10
                },
                telefone: {
                    required: true,
                    number: true

                },
                celular: {
                    required: true,
                    number: true
                },
                endereco: {
                    required: true,
                    rangelength: [10, 250]
                },
                estado: {
                    required: true,
                    minlength: 2
                },
                cidade: {
                    required: true,
                    minlength: 10
                },
                cep: {
                    required: true,
                    number: true,
                    minlength: 9,
                    maxlength: 9
                },
                usuario: {
                    required: true,
                    minlength: 8,
                    maxlength: 20
                },
                senha: {
                    required: true,
                    minlength: 8,
                    maxlength: 20
                },
                senhaconfirma: {
                    required: true,
                    equalTo: "#senha"
                },
                termos: {
                    required: true
                },
                mensagem: {
                    rangelength: [50, 1050],
                }
            },
            messages: {
                nome: {
                    required: "Digite corretamente seu nome ",
                    minlength: "Mínimo de caracteres permitidos 7",
                    maxlength: "Maxímo de caracteres permitidos 25"
                },
                celular: {
                    required: "Digite corretamente seu celular",
                    minlength: "Mínimo de caracteres permitidos 10",
                    maxlength: "Maxímo de caracteres permitidos 11"
                },
                email: {
                    required: "Digite um email válido",
                },
                telefone: {
                    required: "Digite corretamente seu telefone",
                    minlength: "Mínimo de caracteres permitidos 10",
                    maxlength: "Maxímo de caracteres permitidos 11"
                },
                endereco: {
                    required: "Digite corretamente seu endereço",
                    minlength: "Mínimo de caracteres permitidos 10",
                    maxlength: "Maxímo de caracteres permitidos 50"
                },
                cidade: {
                    required: "Digite corretamente sua cidade",
                    minlength: "Mínimo de caracteres permitidos 10",
                    maxlength: "Maxímo de caracteres permitidos 20"
                },
                estado: {
                    required: "Digite corretamente seu estado",
                    minlength: "Mínimo de caracteres permitidos 2",
                    maxlength: "Maxímo de caracteres permitidos 20"
                },
                cep: {
                    required: "Digite corretamente seu cep",
                    minlength: "Mínimo de caracteres permitidos 9",
                    maxlength: "Maxímo de caracteres permitidos 9"
                },
                usuario: {
                    required: "Digite corretamente seu nome de usuário",
                    minlength: "Mínimo de caracteres permitidos 8",
                    maxlength: "Maxímo de caracteres permitidos 20"
                },
                senha: {
                    required: "Digite corretamente sua senha",
                    minlength: "Mínimo de caracteres permitidos 8",
                    maxlength: "Maxímo de caracteres permitidos 20"
                },
                senhaconfirma: {
                    equalTo: "As senhas não conferem, redigite!"
                },
                termos: {
                    required: "Por gentileza, aceite os termos para prosseguir"
                },
                mensagem: {
                    required: "D",
                    minlength: "Mínimo de caracteres permitidos 50",
                    maxlength: "Maxímo de caracteres permitidos 1050"
                },
            }
        });
    </script>
</body>

</html>

Este exemplo de código é basico, mas faz validação em TEMPO REAL, começou a digitar a primeira letra, já mostra erros se tiver, e previsões de caracteres e erros.

Só adaptar para a necessidade.

Entrar

Arquivado

validar ao digitar, com validate jquery

Recommended Posts

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrieldarezzo 255

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Saber se todos os produtos de uma consulta estão cadastrados no banco de dados

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante