Pojawianie się i znikanie znacznika.

Witam. Mam taki problem z pojawianiem się i znikaniem tekstu w zależności czy na dany "obiekt" najedzie się myszką. Mam pole formularza, które znajdują się w dive. Natomiast obok formularza chce umieścić tekst, który informuje o dopuszczalnych wprowadzanych danych. Oto kod:

Kod kawałka formularza:

   <div style="position: relative;">
      <label>Login:</label>
      <input type="text" name="login"/>					
      <span class="walidacja">Tylko małe i duże litery oraz cyfry</span>	
   </div>	

Kod kawałka stylów:

div.formularz2 span{
	visibility: hidden;
}

div.formularz2 input:hover span{
	visibility: visible;
}

p{text-align: center;}

span.walidacja{
	position: absolute;
	left: 250px;
	bottom: 10px;
	white-space: nowrap;
	font-size: xx-small;
	color: red;
}

Jak to zrobić, żeby ten tekst w spanie pojawiał się po najechaniu na input? Co robie źle?

div.formularz2 span{
        visibility: hidden;
}
 
div.formularz2 input:hover + span{
        visibility: visible;
}
 
p{text-align: center;}
 
span.walidacja{
        position: absolute;
        left: 250px;
        bottom: 10px;
        white-space: nowrap;
        font-size: xx-small;
        color: red;
}

Mam kolejny problem, ponieważ chce to samo zrobić używając javascript. Skrypt wygląda tak:

	<script>
			var element=document.getElementById('wal');
			var element2=document.getElementById('wal2');
			function pokaz()
			{
				element2.style.visibility='visible';
			}
			
			function schowaj()
			{
				element2.style.visibility='hidden';			
			}
			element.onClick=pokaz;
			element.onBlur=schowaj;
	</script>

A kod html tak:

<div>
	<label>Login:</label>
	<input id="wal" type="text" name="login"/>					
	<span id="wal2" class="walidacja">Tylko małe i duże litery oraz cyfry.</span>	
</div>			
<div>
	<label>Hasło:</label>
	<input id="wal" type="password" name="haslo"/>	
	<span id="wal2" class="walidacja">Minimum 6 znaków, małe, duże litery oraz cyfry.</span>					
</div>

Nic nie działa. Dodam, że nawet document.write("Cos") mi nie działa ale za to alert("cos") już działa. Proszę o pomoc.

Polecam sprawdzić konsolę javascript i nie uczyć się z kretyńskich tutoriali. A zamiast robić coś takiego w javascript, zrób to w css. Pseudoklasa :focus.

1. Otwórz sobie konsole i sprawdź jakie błędy wywala js
2. Ściągnij jQuery i zacznij w nim pisać.
3. Id jest atrybutem, który może być zastosowany tylko do jednego elementu (unikatowa nazwa). Jeżeli chcesz stosować do kilku to polecam jQuery i stosowanie atrybutów class do tego.
4. Jak chcesz zastosować operację (zdarzenie) onClick na elementach typu input? onClick stosuje się np.: do przycisków

A jeżeli upierasz się przy pure JS to proszę:

<div>
        <label>Login:</label>
        <input type="text" name="login" onFocus="pokaz('login')" onBlur="schowaj('login')"/>                                        
        <span id="login" class="walidacja">Tylko małe i duże litery oraz cyfry.</span>        
</div>                        
<div>
        <label>Hasło:</label>
        <input type="password" name="haslo" onFocus="pokaz('pass')" onBlur="schowaj('pass')/>        
        <span id="pass" class="walidacja">Minimum 6 znaków, małe, duże litery oraz cyfry.</span>                                        
</div>

<script>
                        function pokaz(item_name)
                        {
                                var element = document.getElementById(item_name);
                                element.style.visibility='visible';
                        }
 
                        function schowaj(item_name)
                        {
                                var element = document.getElementById(item_name);
                                element.style.visibility='hidden';                       
                        }
</script>

Możesz ewentualnie zastosować display: none, ale to "usuwa" element.

Możliwe, że popełniłem błąd bo nie pisałem w pure JS od wieków :D

nie słuchaj tego powyżej - nie przypisuj zdarzeń w atrybutach html
twój kod jest ok, ale nie "onClick" tylko "onclick" - javascript jest case sensitive i nie ma tu żadnego camelCase

Chciałem zrobić w js bo docelowo chce uzywać jQuery i myślałem, że warto poznać najpierw js. Ale wziąłem się za jQuery i "prawie" działa. Oto kod:

    var currentId;
    var currentId2;
    $(document).ready
    (
        function()
        {
            $("#login").focus
            (
                function()
                {
                    currentId=$(this).attr("id");
                    currentId2=$("#" + currentId + "+ span").attr("id");
                    $('#' + currentId2).show();
                }
            );
        }        
    );
        
    $(document).ready
    (
        function()
        {
            $("#login").blur
            (
                function()
                {
                    currentId=$(this).attr("id");
                    currentId2=$("#" + currentId + "+ span").attr("id");
                    $('#' + currentId2).hide();            
                }
            );
        }        
    );

Udało mi się zrobić tak, że pobiera id spana leżącego po danym inpucie. Jednak nie moge zrobić tak, żeby pobierało mi automatycznie id tego inputa, który aktualnie będzie aktywy. Da się to zrobić czy musze powtórzyć ten sam skrypt dla kolejnych pól input, zmieniająć tylko wartość id?

zmniejszenie wcięć w kodzie (zamiana znaków tabulatora na 4 spacje) - fp

u ciebie span jest zaraz za inputem wiec poczytaj o .next() w jquery

Problem rozwiązany, kod wygląda tak:

        $(document).ready
        (
            function()
            {
                $('input').focus(
                    function()
                    {
                        $(this).next().show();                
                    }            
                );
                
                        $('input').blur(
                    function()
                    {
                        $(this).next().hide();                
                    }            
                );
            }
        );

zmniejszenie wcięć w kodzie (zamiana znaków tabulatora na 4 spacje) - fp