quinta-feira, 23 de julho de 2009

NyroModal revised + validate

Depois de ficar algum tempo sem postar, correria na troca de emprego , deadlines de projetos... Bom.. segindo...

Algum tempo atrás, me deparei com uma necessidade de abrir um formulário em uma modal, até ai beleza. Chamo a div pelo nyroModal #link e já era. E a validação?
Desde que me deparei com a biblioteca jQuery.validation #link foi amor a primeira vista. Ela é bem simples de ser implementada e mais simples ainda de usar. Na verdade é configurar, ou estender, as regras e pronto, nesse exemplo eu estendo um pouco mais as funcionalidades mudando o jeito que os highlights vão aparecer. Nada muito complexo. Bom mas e a tal modal.
Quebrei um pouco a cabeça, li o manual do nyroModal várias vezes até que cheguei ao seguinte código:

$(function(){
   $("#legal").nyroModal({
       endFillContent: function(){
         $('#email').focus(function(){
            $(this).val('');
         });              
         classeErro = 'Erro';
         $("form").validate({
             rules:{
               email_jogarNovamente:{
                  required:true,
                  email:true
               }
             },
             messages:{
               email_jogarNovamente:{
                  required:'Email inválido!',
                  email:'Email inválido!'
               }
             },
             highlight: function(element, errorClass){
               $(element).addClass(classeErro);
             },
             unhighlight: function(element, errorClass){
               $(element).removeClass(classeErro);
             },
             errorPlacement: function(error, element){
               error.appendTo(element.prev());
             },
             errorElement: 'strong',
             submitHandler: function(form){
               $(form).submit();
             }
           });
       });               
   });
#ficaadica

Nenhum comentário:

Postar um comentário