• 17Oct

    Placeholder crossbrowser com jquery

    Jquery 0 Comentários

    Olá pessoal,

    muita gente já ouviu falar do atributo ‘placeholder’ inserido no HTML 5, ele é um excelente atributo e evita a utilização de javascript para um coisa simples (apagar o texto dos inputs).

    A desvantagem é que nem todos os browsers aceitam esse atributo, bom, abaixo vou colocar uma função em jquery que fará com que o placeholder funcione em todos os browser.

    $("input[type=text], textarea").live("focusin focusout", function(e) {
		if(e.type == "focusin") {
			if($(this).val() == $(this).attr("placeholder")) {
				$(this).val("");
			}
		}
		if(e.type == "focusout") {
			if($(this).val() == "" || $(this).val() == $(this).attr("placeholder")) {
				$(this).val($(this).attr("placeholder"));
			}
		}
});

    o código acima zera o input/textarea caso ele seja igual ao valor inicial, se o input/textarea for vazio ele devolve o placeholder inicial.

    abaixo o código HTML para o funcionamento do script

    <input type="text" name="teste" placeholder="Insira um texto" value="Insira um texto" />

    O atributo ‘value’ é obrigatório para o funcionamento da função, pois ele servirá para os browsers que não possuem suporte para o atributo placeholder executar a função.

    OBS: o valor do atributo ‘value’ deve ser igual ao do ‘placeholder’.

    abaixo o link com um exemplo

    http://goo.gl/ga9JN

  • 26Apr

    Validação de formulario com Jquery

    Jquery 0 Comentários

    Olá pessoal, comecei a usar Jquery esses dias e já notei a enorme facilidade de criar bons efeitos com pouco código.

    Como a maioria das páginas que não possuem validação por AJAXsão validadas com javascript resolvi postar um plugin do Jquery aqui pra vocês com o passo a passo.

    Primeiro faça o download da versão mais rescente do Jquery no site oficial http://jquery.com/

    Feito isso vamos fazer o download do plugin jQuery plugin: Validation no site http://bassistance.de/jquery-plugins/jquery-plugin-validation/

    Agora dentro do <head></head>, vamos colocar a biblioteca Jquery e o plugin Validation com o segunte código.
    Agora Criaremos uma pequena regra CSS para estilizar as mensagens de error.

    <style type="text/css">

* { font-family: Verdana; font-size: 96%; }
label { display: block; margin-top: 10px; }
label.error { float: none; color: red; margin: 0 .5em 0 0; vertical-align: top; font-size: 10px }
p { clear: both; }
.submit { margin-top: 1em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }

</style>

    Depois de adicionar o Jquery e o Plugin, ainda dentro de <head></head> vamos adicionar as instruções para a validação do nosso formulário.


    <script type="text/javascript">
$(document).ready( function() {
$("#formularioContato").validate({
// Define as regras
rules:{
campoNome:{
// campoNome será obrigatório (required) e terá tamanho mínimo (minLength)
required: true, minlength: 2
},
campoEmail:{
// campoEmail será obrigatório (required) e precisará ser um e-mail válido (email)
required: true, email: true
},
campoMensagem:{
// campoMensagem será obrigatório (required) e terá tamanho mínimo (minLength)
required: true, minlength: 2
}
},
// Define as mensagens de erro para cada regra
messages:{
campoNome:{
required: "Digite o seu nome",
minLength: "O seu nome deve conter, no mínimo, 2 caracteres"
},
campoEmail:{
required: "Digite o seu e-mail para contato",
email: "Digite um e-mail válido"
},
campoMensagem:{
required: "Digite a sua mensagem",
minLength: "A sua mensagem deve conter, no mínimo, 2 caracteres"
}
}
});
});

</script>

    E agora nosso formulário em HTML.


    <form id="formularioContato" method="post" action="">
<label>Nome</label>
<input name="campoNome" type="text" value="" />
<label>E-mail</label>
<input name="campoEmail" type="text" value="" />

<label>Mensagem</label>
<textarea name="campoMensagem"></textarea><br />

<input type="submit" class="submit" value="Enviar" />
</form>

    Veja o exemplo nesta página http://jquery.bassistance.de/validate/demo/

    Lembrando que este é um exemplo simples, só para uma introdução, é possível também adicionar funções para validação de CPF e CNPJ neste plugin.

    Dúvidas ou sugestões entre em contato.