quarta-feira, 24 de março de 2010

Validação simples de formulário com Jquery utilizando classes do CSS

Olá pessoal.

Confesso que uma das piores etápas que considero para fazer formulário é a validação. Após alguns estudos desenvolvi uma maneira bem simples de evitar que os campos não sejão enviados em branco.

Vou mostrar um maneira bem simples de validar (fazer com que os campos não sejam enviados em branco) formulário em jquery.

Vamos começar pelo formulário:











Reparem que coloquei um id na tag form, isso para aproveitá-lo atrevés do jquery.
Nos campos que serão obrigatórios é necessário definir o atributo 'title', que será usado no alert caso o campo esteja em branco e a class 'val', na qual o jquery irá varrer para a validação.

Vamos agora analisar o arquivo js:


Depois das funções básica do ready, vamos usar o id configurado no formulário para após submeter o formulário ele fazer as verificações.
Na linha 6 defino a variável que irá contar quantas classes 'val' existem no formulário. Através dela crio um laço 'for' para varrer uma por uma.
Na linha 9 a variável 'len' é responsável por verificar a quantidade de caracteres no input. para quem não conhece a função eq() do jquery, é como se os elementos definidos por ela se tornacem um array. Por exemplo: dentro de uma div(class='prg') existem duas tags P. Para selecionar a primeira tag utilizamos

$(".prg p").eq(1).html(); // esse exemplo pegaria o html dentro da 1º tag p da class prg;

Na linha 10, como citei, é reponsável por pegar o title do input para mostrar no alert caso esteja em branco.
Após a verificação através do if e ocorrer tudo certo, o formulário é enviado.

Espero que ajude no corre-corre do dia-dia.

;D

terça-feira, 23 de março de 2010

PHP - Enviar email de 'indique a um amigo' no formato HTML. com jquery e Codeigniter

Olá pessoal!
Hoje vou mostrar como se enviar um email em php (codeigniter) no formato de HTML. Vou utilizar o exemplo de um formulário de indicar um artigo para um amigo. Já que não vejo necessidade de abrir uma nova página, vou utilizar o jquery para enviar via post sem dar um refresh na página.

No decorrer da explicação haverá alguns detalhes importantes para ser usados em outras ocasiões.

Vamos começar pela VIEW:




O action do formulário na verdade não vai ser utilizado, pois o envio será feito via jquery, porém, o caminho especificado nele é o que será usado no método $.post().

Repare que existem 2 inputs hidden. Eles serão responsáveis por preencher tanto o link quanto o título do artigo, que por sua vez será enviado para o email do convidado.

Um detelhezinho que sempre utilizo em sistemas de notícias e artigos, além de inserir o título do artigo na URL, que por sua vez  ajuda muito no SEO eu removo os espaços e alguns caracteres não recomendados. Essa prática está localizada no input hidden com id ="lk". Utilizo o ereg_replace para tal função. Nesse caso removi apenas os espaços em branco e interrogações, trocando pelo hífen (-). Como citei em outro artigo URL dinâmicas.



O CONTROLLER é bem simples, apenas irá puchar a função do MODEL.








 O MODEL será responsável em pegar os POSTS, criar e enviar o email para o amigo: artigos_model.php








Nas primeiras linhas vamos pegar os posts, em seguida vamos chamar a library email do codeigniter. Criamos uma variável para guardar o conteúdo do email, consequentemente trabalhando junto com os posts. Na criação dessa variável podemos utilizar as tags de HTML comuns, ou seja, as que os servidores de email suportam. Não é recomendado usar tags de formulário, iframe, entre outras.
Em relação ao CSS, é recomendado usar o método inline, tanto criando classes antes do head quanto usando os styles nas próprisa Tags. Já tentei chamar alguns CSSs na tag link mas não deram certo.


A linha $config['mailtype'] = 'html' é fundamental para que tudo funcione corretamente. Caso os emails não sejam enviados, altere a linha $config['mailpath'] para 'mail'.


 Como se deve imaginar as funções de email já dizem tudo:
->from = Email do remetente
->to = Email de quem vai receber
->subject = Assunto do email
-> message = Utilizamos a variável que guardarmos o conteúdo do email.

no final do código existe uma linha com comentário. Ela poderá ser usada caso queiram dar um feedback do envio. Nesse caso iríamos alterar a função $.post para $().get. Isso será visto Agora:

JQUERY

vamos criar um arquivo para configurar o envio do formulário. Vou chamá-lo de artigos.js




Lembrando que temos que puchar a função definindo um ID para o formulário (view). A partir dele chamamos a função submit(); Fazemos uma pequena validação (em breve vou postar um modo bem simples de validar com classes) dos campos para não irem em branco. Depois utilizamos a função $.post e utilizo um callback para enviar um alert que foi enviado.

Lembrando que na view onde está o formulário o arquivo jquery tem que ser chamado, e antes do artigos.js.
Não informei o nome do controller, pois vai depender de cada um a definição.

Qualquer dúvida é só mandar. Vamos evoluir juntos.