Como validar formulários facilmente com Vanadium

Jonas 3 Comments

Vanadium é um plugin para jQuery que permite validar formulários de maneira simples e com poucas linhas de código. Permite validar campos obrigatórios, numéricos, email e outros.

Validar formulários é muito importa no desenvolvimento web, pois previne-se a inserção de dados inválidos ou em formato inadequado.

Obivamente estas validações devem vir acompanhadas de uma validação do lado do servidor para ter uma dupla proteção. Veja como utilizar do lado do cliente a biblioteca Vanadium para validar seus formulários.

Como utilizar o Vanadium
A primeira coisa a fazer é baixar o script do site oficial (), pode-se escolher qualquer versão: vanadium.js contém comentários que podem ser utilizados para edita. O vanadium-min.js é o mesmo script, porém de forma comprimida para acelerar o carregamento.

O próximo passo é incluir a biblioteca Jquery (eu prefiro utilizar o Jquery diretamente do Google AJAX Libraries API), e Vanadium diretamente em sua página, dentro das tags Head, para fazer uso de seus métodos.

  1. <scripttype=“text/javascript”src=“http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
  2. <scripttype=“text/javascript”src=“vanadium.js”></script>

Agora é so adicionar diretamente nos campos de nosso formulário, o tipo de validação que queremos aplicar, isso é fácil fazer através do uso de classes de estilos. Alguns dos tipos de validações:

  • :required o campo é obrigatório.
  • :integer aceita-se somente números inteiros.
  • :float aceita-se numeros decimais.
  • :length;n é obrigatório que o campo tenha pelo menos 1 caractere.
  • :min_length;n aceita-se n caractere como valor mínimo.
  • :max_length;n aceita-se n caractere como valor máximo.
  • :accept o campo checkbox deve ser marcado.
  • :email o campo deve ter um endereço de email válido.

Por exemplo, digamos que tenhamos um formulário de registro, onde os campos usuário e senha são obrigatórios, e o campo de email deve aceitar somente email válido, então teríamos um formulário assim:

  1. <formmethod=“post”action=“”>
  2. Usuario:
  3. <inputname=“usuario” type=“text” id=“usuario” size=“36” class=“:required” />
  4. Senha:
  5. <inputname=“senha” type=“text” id=“senha” size=“36” class=“:required” />
  6. Email:
  7. <inputname=“email”type=“text” id=“email” size=“36” class=“:email” />
  8. <inputtype=“submit”name=“btsend”id=“btsend”value=“Registro” />
  9. </form>

Simples assim, com isso já teremos nosso formulário validado.

Agora se deseja personalizar esta validação basta modificar os estilos e as mensagens de erros e confirmações. Veja mais detalhes diretamente no site da biblioteca.

Link: Vanadium

Mysql – duplicar coluna

Jonas 5 Comments

Dica besta, que pode salvar alguém…

Como duplicar o conteúdo de uma coluna de uma mesma tabela de um Banco de Dados?

[sql] update TABELA set ColunaDestino = ColunaOrigem [/sql]

Simples assim.

Há então quer dizer que posso também usar esta técnica para adicionar uma sequencia de valores em colunas? Sim, ai é so fazer assim:

[sql] UPDATE tabela SET coluna=CONCAT(coluna, ‘.jpg’) [/sql]

Curso gratuito de Análise Forense Básico

Jonas Leave a comment

Um curso básico de análise forense que você pode utilizar para se iniciar na área de segurança da informação. Divididos em 4 partes, cada uma detalha os passos em uma linguagem, pouco técnica e de fácil compreensão.

Howto: Menu com include em PHP – Com CSS para destacar link da página ativa

Jonas 7 Comments

 

Howto: Menu com include em PHP – Com CSS para destacar link da página ativa
===============================================================

Eu sempre preferi utilizar um arquivo separado com menu em meus projetos, como um sidebar, em vez de repetir em todas as páginas, pela razão óbvia de que os ítens do menu, por vezes podem mudar de URL e é mais fácil alterar um arquivo apenas do que mudar os links em todas as páginas que mostram esse menu.

Enfim, recentemente eu também queria usar CSS para destacar os links ativos ou da página atual que o usuário esteje, isso é fácil de se fazer quando o menu é em cada página, mas requer um pouco de código extra quando se utiliza um único menu incluídos em seu site.

Então, de qualquer forma aqui está a minha solução:

Opção I

Aqui está o código para o menu de navegação – e salvei esse trecho com o nome menu.php.

[code=php]
< ?php $active[$current] = "class=active"; ?>

[/code]

Se você estiver utilizando o class diretamente no Link, pode-se mover o echo, assim:

[code=php]
< ?php $active[$current] = "class=active"; ?>

[/code]

Em seguida, basta incluir o menu em suas páginas e indicar qual dos links no menu que pretende atribuir o estilo CSS “active”:

[code=php] < ?php $current = 3; include("menu.php"); ?> [/code]

Por fim, não esqueça de criar uma classe CSS chamada “active” para fazer o link da página atual se destacam dos demais.

VARIAÇÃO – Você também pode alterar o código do menu para a tornar a página ativa não linkável, destacando-se ainda mais das demais opções do menu. Aqui está um exemplo do código que você usaria para os links:

[code=php]

  • >
    < ?php if ($current != 1) { echo "home”; } else { echo “home”; } ?>
  • >
    < ?php if ($current != 2) { echo "    web”; } else { echo “web”; } ?>

    • [/code]

    Opção II

    Para saber em qual link esta ativo é necessário saber em qual página estamos, então a primeira coisa que precisamos fazer é obter a URL da página atual. Isto em PHP pode ser feito com um comando simples:

    [code=php]$_SERVER[“REQUEST_URI”][/code]

    Este comando retorna a URL completa do servidor, juntamente com a página atual.
    Agora que temos a informação de que precisamos, podemos começar a fazer o nosso menu:

    [code=php]

    [/code]

    O código acima verifica se a página atual é a mesmo que o link e se for ele adiciona a classe active. Agora nós podemos simplesmente criar o estilo ativo em CSS.

    [code=css]
    .active a:link {
    background-image: url(images/button_active.jpg);
    }
    [/code]

    E pronto, seu menu agora terá links ativos diferentes.

    Problemas:
    Eu entendo que esta solução está longe de ser perfeita e que não irá trabalhar em grandes sites. Eu só achei muito útil meus projetos pequenos. Mantem-se os menus dinâmicos e fácil de alterar.

    Caso você utilize subpasta para organizar seus arquivos, você pode utilizar o comando abaixo para retonar o nome da pasta também:

    [code=php] basename(dirname($_SERVER[“REQUEST_URI”])) [/code]

    Provavelmente este método funcione melhor.

    Espero que seja útil pra você também…

    Bloqueando tecla Enter

    Jonas 2 Comments

    Howto: Como Bloquear a tecla Enter em Formulários.
    ==================================================================

    [code=html]


    [/code]