sábado, 20 de setembro de 2008

Validação de campos de formulário com Javascript

Uma solução bastante simples e interessante para a validação de campos de formulários, utilizando javascript.

A mensagem não de erro, não abre-se num pop-up, mas sim ao lado do campo.

Para baixar o código javascript, clique aqui

Abaixo segue o código para ser inserido entre as tags <head>

<script type="text/javascript">
// Somente os dados dos campos deste formulário vai aqui.
// As rotinas/funções de uso geral estão no arquivo, que está separado.

function validateOnSubmit() {
var elem;
var errs=0;
// execute all element validations in reverse order, so focus gets
// set to the first one in error.
if (!validateTelnr (document.forms.demo.telnr, 'inf_telnr', true)) errs += 1;
if (!validateAge (document.forms.demo.age, 'inf_age', false)) errs += 1;
if (!validateEmail (document.forms.demo.email, 'inf_email', true)) errs += 1;
if (!validatePresent(document.forms.demo.from, 'inf_from')) errs += 1;

if (errs>1) alert('Campos Inválidos');
if (errs==1) alert('There is a field which needs correction before sending');

return (errs==0);
};
</script>

Agora, segue o código html, para ser inserido entre as tags <body>

<form name="demo" onsubmit="return validateOnSubmit()" action="#">
<div style="width: 100%">
<div style="width: 15%; float:left"><label for="from">Seu nome:</label></div>
<div style="float:left">
<input type="text" name="from" id="from" size="35" maxlength="50" onchange="validatePresent(this, 'inf_from');">
</div>
<div id="inf_from">*</div>
</div><br />

<div style="width: 100%">
<div style="width: 15%; float:left"><label for="email">Se e-mail:</label></div>
<div style="float:left">
<input type="text" name="email" id="email" size="35" maxlength="50" onchange="validateEmail(this, 'inf_email', true);">
</div>
<div id="inf_email">*</div>
<div><br />

<div style="width: 100%">
<div style="width: 15%; float:left"><label for="age">Sua idade (em anos):</label></div>
<div style="float:left">
<input type="text" name="age" id="age" size="35" maxlength="5" onchange="validateAge(this, 'inf_age', false);">
</div>
<div id="inf_age"> </div>
</div><br />

<!-- Obs.: O elemento para receber mensagens de erro deve conter alguns dados (para a maioria, se não todos os navegadores). 1 é suficiente. -->

<div style="width: 100%">
<div style="width: 15%; float:left"><label for="telnr">Seu telefone (fixo):</label></div>
<div style="float:left">
<input type="text" name="telnr" id="telnr" size="35" maxlength="25" onchange="validateTelnr(this, 'inf_telnr', true);">
</div>
<div id="inf_telnr">* Você pode usar espaços ou hífen!</div>
</div><br />

<div style="width: 100%">
<div> </div>
<div><input type="Submit" name="Submit" value=" Enviar "></div>
<div> </div>
</div>

</form>

Para ver o formulário em funcionamento, clique aqui.

É isso aí!

Abraços


fonte: http://www.xs4all.nl/~sbpoley/webmatters/formval.html

Marcadores:

postado por Milton Sylvio às 13:53 0 Comentários

Tirando o bug do .PNG no I.E. 6

Infelizmente o Internet Explorer 6 (e versões anteriores) não dá suporte ao tipo de arquivo de imagen PNG.

Para isso, é necessário colocar o seguinte hack (CSS - Alpha PNG support for IE):

Aviso, este código abaixo funciona apenas para visualização na tela. Quando este documento for impresso, o bug voltará.
O Hack Abaixo faz o código rodar apenas no IE. Sendo que os outros browsers como, Firefox, Opera e Safari já tem a transparencia de PNG nativo.

\*/
* html img/**/ {
filter:expression(
this.alphaxLoaded ? "" :
(
this.src.substr(this.src.length-4)==".png"
?
(
(!this.complete)
? "" :
this.runtimeStyle.filter=
("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.src+"')")+
(this.onbeforeprint="this.runtimeStyle.filter='';this.src='"+this.src+"'").substr(0,0)+
String(this.alphaxLoaded=true).substr(0,0)+
(this.src="blank.png").substr(0,0)
)
:
this.runtimeStyle.filter=""
)
);
}
html, body {
color:#000;
background:#333333;
}

Abraços,

postado por Milton Sylvio às 10:36 0 Comentários

sexta-feira, 19 de setembro de 2008

Posicionando imagens ao lado de textos (os editores chamam-a de "olho") usando a técnica de "listas de definição"

Uma dúvida que eu tinha: Como deixar deixar imagens ao lado de textos, sem usar tabelas?

Para resolver esse problema utilizei a técnica de "lista de definição", no qual usa-se as tags <dt>, <dl> e <dd> com o auxilio de CSS.

A tag dl vem do inglês definition list e significa lista de definição.

A tag dt vem do inglês definition term e significa termo de definição.

A tag dd vem do inglês definition description e significa descrição de definição.

O uso combinado dessas tags permite obter resultados similares ao das tags ul e li de listas exceto pelo marcador.

Como exemplo, utilizarei o seguinte código:

<dl class="destacar">
<dt> <img src="http://www.miltonsylvio.com/img/mr-been.gif" width="96" height="96" />Titulo do Texto</dt>
<dd> Ne vero ex hac nostra decem dierum subtractione, alicui, quod ad annuas vel menstruas praestationes pertinet, praeiudicium fiat, partes iudicum erunt in controversis, ...</dd>
</dl>

Agora o código CSS:

dl.destacar {
margin: 15px 0;
padding: 15px;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
}

dl.destacar dt img {
float: left;
margin: 0 10px 0 0;
padding: 0 3px 3px 0;
}

dl.destacar dd {
margin-left: 110px;
font-size: 90%;
line-heigh:1.5em;
color:#666;
}

dl.destacar:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

dl.destacar dt {
margin: 0 0 .5em 0;
font-famlily: Georgia, Times, Times New Roman;
font-size: 140%;
color: #1f328b;
}

Abaixo, o resultado:


Titulo do Texto

Ne vero ex hac nostra decem dierum subtractione, alicui, quod ad annuas vel menstruas praestationes pertinet, praeiudicium fiat, partes iudicum erunt in controversis, ...



É isso aí!

Marcadores:

postado por Milton Sylvio às 16:47 0 Comentários