2 funções JQuery em um mesmo input

[regina 0]

Boa tarde,

 

estou iniciando o uso de Jquery em formulários, e já me surgiu a seguinte dúvida, como devo proceder para utilizar 2 funções diferentes em um mesmo input?

 

por exemplo: em um formulário de cadastro tenho os campos

		<label class="campo" for="codigo">Código:</label><input type="text" class="dica" name="codigo" id="codigo" maxlength="15" tabindex="3" title="Seu código"/><span>Somente números</span><br />
	<label class="campo" for="password">Senha:</label><input type="password" class="password" name="password" id="password" maxlength="15" tabindex="4" title="Seu senha"/><span>Mínimo de 6 caractestes</span><br />

No campo password gostaria de exibir a dica de preenchimento e também verificar a força da senha, mas não consegui fazer as duas funções funcionarem simultaneamente.

 

Para a força da senha estou usando o script http://simplythebest.net/scripts/ajax/ajax_password_strength.html

e para exibir a dica o script do livro do GRANDE MAUJOR http://www.livrojquery.com.br/jq2/cap_11/arquivo-11.3a.html.

 

Agradeço

[William Bruno 1501]

mostre como você tentou usar os 2 juntos.

[regina 0]

<script type="text/javascript" src="../jquery/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
		$('.dica + span')
		.css({display: 'none',
		border: '1px double #000',
		padding: '4px 4px',
		background: '#CC0000',
		marginLeft: '2px'
		});
		$('.dica').focus(function() {
			$(this).next().fadeIn(1500);
		}).blur(function() {
			$(this).next().fadeOut(1500);
		});		
});
// ]]>	
</script>
<script type="text/javascript" src="../jquery/jquery.pstrength-min.1.2.js"></script>
</script>
<script type="text/javascript">
$(function() {
$('.dica').pstrength();
});
</script>

no form

		<label class="campo" for="codigo">Código:</label><input type="text" class="dica" name="codigo" id="codigo" maxlength="15" tabindex="3" title="Seu código"/><span>Somente números do CPF do responsável.</span><br />
	<label class="campo" for="password">Senha:</label><input type="password" class="dica" name="password" id="password" maxlength="15" tabindex="4" title="Seu senha"/>

[William Bruno 1501]

veja se aparecem erros no console do Firefox.

 

pressione Ctrl+Shif+J

 

referencia http://www.wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

[regina 0]

Havia tentado isso antes, mas infelizmente não exibe nenhum erro.

 

Se eu deixar todos os inputs com a class dica ele exibe somente a força da senha não a dica de preenchimento :(

 

o html gerado fica assim:

<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
		$('.dica + span')
		.css({display: 'none',
		border: '1px double #000',
		padding: '4px 4px',
		background: '#CC0000',
		marginLeft: '2px'
		});
		$('.dica').focus(function() {
			$(this).next().fadeIn(1500);
		}).blur(function() {
			$(this).next().fadeOut(1500);
		});		
});
// ]]>	
</script>
<script type="text/javascript" src="jquery/jquery.pstrength-min.1.2.js"></script>
</script>
<script type="text/javascript">
$(function() {
$('.dica').pstrength();
});
</script>
	<label class="campo" for="codigo">Código:</label><input class="dica" name="codigo" id="codigo" maxlength="15" tabindex="3" title="Seu código" type="text"><div class="pstrength-bar" id="codigo_bar"></div><div class="pstrength-info" id="codigo_text"></div><span style="display: none; border: 1px double rgb(0, 0, 0); padding: 4px; background: none repeat scroll 0% 0% rgb(204, 0, 0); margin-left: 2px;">Somente números.</span><br>
	<label class="campo" for="password">Senha:</label><input class="dica" name="password" id="password" maxlength="15" tabindex="4" title="Seu senha" type="password"><div class="pstrength-bar" id="password_bar"></div><div class="pstrength-info" id="password_text"></div><span style="display: none; border: 1px double rgb(0, 0, 0); padding: 4px; background: none repeat scroll 0% 0% rgb(204, 0, 0); margin-left: 2px;">Mínimo de 4 caracteres (combinação de letras e números, como quiser).</span><br>

Tem como por um if id="password" executar onkeypress

$(function() {

$('.dica').pstrength();

});

[Bruno Augusto 417]

Olha, para descartar qualquer probabilidade de alguma possível "bagunça" no HTML estar impedindo de funcionar, resumir a isso:

 

 

<html>
<head>
<style type="text/css">
span {
   display: none;
   border: 1px double #000;
   padding: 4px 4px;
   background: #CC0000;
   margin-left: 2px;
}
</style>
<script type"=text/javascript" src="jquery.js"></script>
<script type"=text/javascript" src="jquery.pstrength-min.1.2.js"></script>
<script type="text/javascript">
$( document ).ready( function() {

   $( '#password' ).pstrength();

   $( '.input' ).focus( function() {

       $( this ).next( 'span' ).show();
   });

   $( '.input' ).blur( function() {

       $( this ).next( 'span' ).hide();
   })
});
</script>
</head>
<body>

<label class="campo" for="codigo">Código:</label>
<input name="codigo" id="codigo" maxlength="15" tabindex="3" title="Seu código" type="text" class="input">

<span class="dica">Código</span>

<br />

<label class="campo" for="password">Senha:</label>
<input name="password" id="password" maxlength="15" tabindex="4" title="Seu senha" type="password" class="input">

<span class="dica">Password</span>

</body>
</html>

 

Como está, o esquema da dica não funciona para o campo da senha.

 

Comenta-se a linha que ativa o plugin e volta a funcionar.

 

Talvez, o plugin esteja com problema, muito embora eu não tenha visto nada nele que pudesse causar tal comportamento.

 

Eu até especifiquei o seletor para next(), para que o show/hide não operasse sobre a DIV criada pelo plugin...