none
Validar campos com jquery no onblur dos campos

    Pergunta

  • Há um tempo atrás peguei uma forma interessante de validar campos com jquery no evento onblur dos campos que eu queria, sendo que perdi esse tutorial e hj eu não será que alguém tem algo nesse estilo, não quero validar os campos depois de um click no botão quero que isso seja feito no cliente assim que ele sair do campo.


    Junior

    quinta-feira, 26 de julho de 2012 12:14

Respostas

  • Sim... o código está errado. Troque para:

    <script language="javascript" type="text/javascript"> $(function () { $("#txtMatricula").live("blur", function(){ if ($(this).val() == "") { alert('campo obrigatorio') }

    }); }); </script>


    Rafael Santos
    E-mail: rsdsantos@gmail.com

    Pequeno Gafanhoto

    • Marcado como Resposta Junior_luiz sexta-feira, 27 de julho de 2012 12:35
    quinta-feira, 26 de julho de 2012 20:10

Todas as Respostas

  • Saca de JQuery, ou quer só o código pronto?

    Rafael Santos
    E-mail: rsdsantos@gmail.com

    Pequeno Gafanhoto

    quinta-feira, 26 de julho de 2012 13:24
  • Rafa na realidade achei uma parte do que eu queria só não me lembro como era no asp olha só conseguir resgatar o script

    <script language="javascript" type="text/javascript">
            function Pageload() {
                $(":text").blur(validar);
            }
            function validar() {
                if ($(this).val() === "")
                    $(this).next("span").show();
                else
                    $(this).next("span").hide();
    
            }
    </script>

    Sò não me lembro como era na parte do aspx.

    Junior

    quinta-feira, 26 de julho de 2012 14:11
  • Bom, eu faria algumas modificações nesse código aí:

    <script language="javascript" type="text/javascript">
            
    $(function(){
         $(":text").blur(validar);
    });
    
    function validar() {
         if ($(this).val() === "")
             $(this).next("span").show();
         else
             $(this).next("span").hide();
    
    }
    </script>

    É importante saber que esse código somente irá relatar uma mensagem caso a TextBox esteja vazia (string.empty).

    No seu ASPX, coloque uma tag <span> imediatamente após seu TextBox. Nela coloque a mensagem de erro que desejar.

    Pronto, acredito não ser necessário fazer mais nada. Ah, e claro, referencie a biblioteca externa do JQuery.


    Rafael Santos
    E-mail: rsdsantos@gmail.com

    Pequeno Gafanhoto

    quinta-feira, 26 de julho de 2012 14:17
  • Rafa como eu poderia alterar para os textbox que eu quero e colocar algumas restrições tipo obrigar pelo menos a digitação de alguns caracteres em um determinado textbox, estou usando masterpage e outra como coloca a mensagem que eu quero no <span> coloquei mais não fez nada.

    Junior

    quinta-feira, 26 de julho de 2012 14:38
  • Essa função que vc postou aqui é totalmente genérica. Você pode especializá-la desmembrando-a.

    Vou falar da lógica do funcionamento que o resto vc vai tirar de letra.

    $(function(){
         [...]
    });
    //Esse código serve como um listenner, que fica monitorando cada ação que você realiza na página.

    $(":text").blur(validar);
    //Este código utiliza o seletor $(":text") para recuperar todos os elementos do tipo text. Basicamente, o famoso <input type="text">; e atribui a ele um método chamado blur() que é executado toda vez que houver um blur no seu input text. Então o método blur do JQuery chama uma função chamada validar(). É exatamente como funcionam os Eventos no C#/VB.NET.


    O JQuery possui 2 tipos principais de seletores (existem outros, mas estes são os principais): ou você recupera os elementos por ID ou por Classe (de css). No ASP.NET recuperar um dado por ID pode se tornar difícil se o ClientIDMode do controle estiver configurado como Automatic. O Javascript / JQuery não irá recuperar o ID renderizado e assim não enxergará seu controle. Então, a melhor forma de recuperar um elemento por ID é configurar a propriedade ClientIDMode para Static.

    Você pode também, e não é tão feio quanto parece, manter seu ClientIDMode como Automatic e criar uma classe de estilo para cada elemento. Mesmo que você não crie sua definição na sua folha de estilo, apenas o nome atribuído ao elemento basta.

    Os dois modos de seleção funcionam assim:

    $("#IDDoElemento") -> ID
    $(".ClasseDoElemento") -> Classe / Estilo

    Como você quer trabalhar individualmente com cada campo, eu aconselho você antes de mais nada a trabalhar com os controles de validação do ASP.NET e esquecer validação com JQuery. RequiredFieldValidator com CustomValidator resolvem seu problema. Se você inserir controles de mascaras do Ajax Control Toolkit facilita mais ainda. Mas se você quer mesmo validar com JQuery, algumas mudanças serão necessárias.

    1 - Defina como quer identificar seu controle - e posteriormente elemento HTML -: Classe ou ID estática.

    2 - Crie uma função JQuery de blur para cada campo, desta forma:

    $(function(){
         $(".Campo1").blur(function(){
              //insira aqui sua validação
         });
    
         $(".Campo2").blur(function(){
              //insira aqui sua validação
         });
    
         $(".Campo3").blur(function(){
              //insira aqui sua validação
         });
    });

    Se você perceber, eu retirei a função validar(). É possível fazer o código diretamente inserindo uma function na passagem de parâmetro.


    3 - Dentro do método de blur, você deve usar o seletor $(this) para trabalhar com os dados daquele elemento, ou seja, do elemento que acionou o blur. Use o método val() para recuperar ou inserir o value do seu elemento. Um exemplo segue:

    $(".Campo1").blur(function(){
        alert($(this).val());
    });

    Após isso, trabalhando com o value do campo você consegue com os IFs fazer suas validações. Quanto a amostragem da mensagem de erro, você pode fazer o seguinte: colocar uma única <div> em um lugar comum do seu site onde todas as mensagens de erro estarão concentradas. Veja:

    <div id="MsgErro"></div>

    Então seu código de validação ficaria assim:

    $(function(){
         $(".Campo1").blur(function(){
              if($(this).val() == "")
              {
                   $("#MsgErro").Html("Erro no campo 1");
              }
         });
    
         $(".Campo2").blur(function(){
              if($(this).val().length < 3)
              {
                   $("#MsgErro").Html("Erro no campo 2. Sua mensagem deve conter mais de 3 caracteres");
              }
         });
    
         $(".Campo3").blur(function(){
              if($(this).val() == " ")
              {
                   $("#MsgErro").Html("Erro no campo 3");
              }
         });
    });

    Daí em diante dá para ter algumas ideias e mudar o código para sua necessidade, caso deseje inserir uma span para cada elemento ou mesmo uma div, enfim, várias ideias. É importante apenas se ligar nos seletores JQuery. É importante saber também que enquanto <span> não dá quebra de linha, o <div> dá.

    Abs!


    Rafael Santos
    E-mail: rsdsantos@gmail.com

    Pequeno Gafanhoto


    • Editado Rafa Santos quinta-feira, 26 de julho de 2012 15:15
    quinta-feira, 26 de julho de 2012 15:12
  • Rafa obrigado pela explicação algumas coisas a respeito de jquery eu já sabia, mais vamos ao que interessa, pensei em validar os campos com jquery pq valida no cliente se eu usar as validações do asp net só validarei no postback e é exatamente isso que queria evitar, pq fazer essas validações no postback deixo como está hoje ou seja no clique do botão gravar no codebehind verifico se os campos obrigatórios foram preenchidos e dou um alert caso nao tenham sido preenchidos, pensei apenas evitar isso, ou seja, se o usuário saiu do textbox sem preenche-lo dou logo o erro.Acho que fica mais dinamico,, evita que o usuário clique em um botao e somente ai ele será alertado que faltou preencher alguns campos.

    Como falei acima há um tempo atrás achei algo muito interessante e cheguei até a implementar em um projeto teste sendo que perdi esse projeto e não tenho mais o exemplo.


    Junior

    quinta-feira, 26 de julho de 2012 17:14
  • O exemplo que dei acima faz a validação exatamente como quer, só que coloquei uma DIV como container para as mensagens de erro.

    Rafael Santos
    E-mail: rsdsantos@gmail.com

    Pequeno Gafanhoto

    quinta-feira, 26 de julho de 2012 17:16
  • coloquei mais não esta funcionando, não seria pq estou usando masterpage

    Junior

    quinta-feira, 26 de julho de 2012 17:21
  • Acredito que não. Verifique as referências do Jquery, verifique se já não existe um tipo de $(); em outro lugar. Verifique se não há alguma incompatibilidade. Tente fazer o JQuery rodar bem básico.

    Rafael Santos
    E-mail: rsdsantos@gmail.com

    Pequeno Gafanhoto

    quinta-feira, 26 de julho de 2012 18:01
  • Rafa fiz assim

    <script language="javascript" type="text/javascript">
            $(function () {
                $(".txtMatricula").blur(function () {
                    if ($(this).val() == "") {
                        $("#MsgErro").Html("Campo matrícula é obrigatório");
                    }
                });
    
                $(".Campo2").blur(function () {
                    if ($(this).val().length < 3) {
                        $("#MsgErro").Html("Erro no campo 2. Sua mensagem deve conter mais de 3 caracteres");
                    }
                });
    
                $(".Campo3").blur(function () {
                    if ($(this).val() == " ") {
                        $("#MsgErro").Html("Erro no campo 3");
                    }
                });
            });
        </script>
    Sendo que além de está usando master page todos os campos estão dentro de ajax container

    Junior

    quinta-feira, 26 de julho de 2012 18:24
  • Ah sim, aí vc tem um problema.

    Não o fato propriamente dito de você estar usando MasterPage, mas sim um UpdatePanel.

    O UpdatePanel perde as referências externas (códigos JS fora do UP) quando são atualizados. Uma solução pra isso é colocar o bloco de código dentro do UpdatePanel.

    Veja se é isso.


    Rafael Santos
    E-mail: rsdsantos@gmail.com

    Pequeno Gafanhoto

    quinta-feira, 26 de julho de 2012 18:27
  • vc diz colocar o script dentro do updatepanel ?

    Junior

    quinta-feira, 26 de julho de 2012 18:45
  • Exatamente. Se não, ele perde a referência quando o UpdatePanel sofrer um Update, conditional ou always, não importa.

    Rafael Santos
    E-mail: rsdsantos@gmail.com

    Pequeno Gafanhoto

    quinta-feira, 26 de julho de 2012 18:46
  • mais não estou usando update panel estou usando apenas o container do ajax que faz abas na página conhece ?

    Junior

    quinta-feira, 26 de julho de 2012 19:01
  • Já ouvi falar...

    Bem, podemos supor que talvez ele use, internamente, um UpdatePanel... Não custa nada tentar um JavaScript mais simples, só um alerta, para ver se funciona corretamente...


    Rafael Santos
    E-mail: rsdsantos@gmail.com

    Pequeno Gafanhoto

    quinta-feira, 26 de julho de 2012 19:03
  • deixei o script so assim e nao funciona

    <script language="javascript" type="text/javascript">
            $(function () {
                $("#txtMatricula").blur(function () {
                    alert($(this).val());
                });
            });
        </script>


    Junior

    quinta-feira, 26 de julho de 2012 19:16
  • Blz

    Então deixa ele assim:

    <script language="javascript" type="text/javascript">
         $(function () {
              alerta("TESTE!");
         });
    </script>

    ele tem que dar o alerta assim que você entrar na página!


    Rafael Santos
    E-mail: rsdsantos@gmail.com

    Pequeno Gafanhoto

    quinta-feira, 26 de julho de 2012 19:18
  • deu o alert

    Junior

    quinta-feira, 26 de julho de 2012 19:25
  • Ok, então o JavaScript ta ok e o Jquery tb.

    Vc já viu se:

    A ID txtMatricula está estática e não inherit? Ou seja, se quando o JQuery está renderizando, ele não está mudando a ID do campo.

    O que pode ser tb, é o que eu falei... quando o ajax renderiza a sua parte, ele acaba perdendo a referência do elemento. Eu tive um problema de perda parecido. Eu resolvi usando o método LIVE() do JQuery. Definição: http://api.jquery.com/live/

    Deveria ficar mais ou menos assim:

    $("#txtMatricula").live("blur", function(){ alert("Deu o blur!!!"); });
    Testa aí!!!


    Rafael Santos
    E-mail: rsdsantos@gmail.com

    Pequeno Gafanhoto

    quinta-feira, 26 de julho de 2012 19:32
  • o Id do campo está inherit coloquei como vc falou e não funfou


    Junior

    quinta-feira, 26 de julho de 2012 19:40
  • Se tiver em inherit não tem como funcionar. Pode ter certeza que o problema não foi a troca.

    Quer ver? Coloca a ID como inherit, executa seu site, visualiza o código fonte e procura seu txtMatricula. Olha a ID que o ASP.NET criou. Depois muda para Static e olha dnv.


    Rafael Santos
    E-mail: rsdsantos@gmail.com

    Pequeno Gafanhoto

    quinta-feira, 26 de julho de 2012 19:42
  • agora funcionou

    Junior

    quinta-feira, 26 de julho de 2012 19:50
  • Amém!

    Rafael Santos
    E-mail: rsdsantos@gmail.com

    Pequeno Gafanhoto

    quinta-feira, 26 de julho de 2012 19:50
  • mais qdo fiz isso nao funcionou mais

    <script language="javascript" type="text/javascript">
            $(function () {
                $(function () {
                $("#txtMatricula").live("blur", function(){ 
                    if ($(this).val() == "") {
                        alert('campo obrigatorio')
                    }
                });
    
    
            });
    </script>


    Junior

    quinta-feira, 26 de julho de 2012 19:56
  • Sim... o código está errado. Troque para:

    <script language="javascript" type="text/javascript"> $(function () { $("#txtMatricula").live("blur", function(){ if ($(this).val() == "") { alert('campo obrigatorio') }

    }); }); </script>


    Rafael Santos
    E-mail: rsdsantos@gmail.com

    Pequeno Gafanhoto

    • Marcado como Resposta Junior_luiz sexta-feira, 27 de julho de 2012 12:35
    quinta-feira, 26 de julho de 2012 20:10