JavaScript - Como mover un input cuando se introduce un valor erroneo

   
Vista:
Imágen de perfil de Kevin

Como mover un input cuando se introduce un valor erroneo

Publicado por Kevin (7 intervenciones) el 08/08/2014 05:05:56
necesito el código javascript o no se que utilize para que me haga este efecto:
http://gyazo.com/7856bd01590173e45ecaedf50b5f0cdc
Quiero que me haga ese efecto de que si algo está incompleto o esta mal se muevan los divs de esa manera.
PD: link: https://www.habbo.es/#registration
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Como mover un input cuando se introduce un valor erroneo

Publicado por xve (1596 intervenciones) el 08/08/2014 09:19:01
Hola Kevin, la verdad es que no se si hay alguna manera mas sencilla, pero te he creado este ejemplo... haber si te sirve.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
 
    <script>
    var contador=0;
    $(document).ready(function(){
		$("input[type=button]").click(function(){
			if($("input[name=test]").val()=="")
			{
				contador=0;
				rotateA();
			}
		});
	});
	function rotateA()
	{
		$("input[name=test]").removeClass("rotateC").addClass("rotateA");
		setTimeout("rotateB()",50);
	}
	function rotateB()
	{
		$("input[name=test]").removeClass("rotateA").addClass("rotateB");
		if(contador++<5)
			setTimeout("rotateC()",50);
	}
	function rotateC()
	{
		$("input[name=test]").removeClass("rotateB").addClass("rotateC");
		setTimeout("rotateA()",50);
	}
    </script>
 
	<style>
	.rotateA {
		transform:rotate(-1deg);
		-webkit-transform:rotate(-1deg);
		-moz-transform:rotate(-1deg);
		-o-transform:rotate(-1deg);
	}
	.rotateB {
		transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
		-o-transform:rotate(0deg);
	}
	.rotateC {
		transform:rotate(1deg);
		-webkit-transform:rotate(1deg);
		-moz-transform:rotate(1deg);
		-o-transform:rotate(1deg);
	}
	</style>
</head>
 
<body>
 
<form>
<input type="text" name="test">
<input type="button" value="test">
</form>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Kevin

Como mover un input cuando se introduce un valor erroneo

Publicado por Kevin (7 intervenciones) el 08/08/2014 10:01:47
Gracias me gustan tus respuestas, tienes skype?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Como mover un input cuando se introduce un valor erroneo

Publicado por xve (1596 intervenciones) el 08/08/2014 15:52:46
Gracias por tus comentarios Kevin, pero únicamente ayudo a través de los foros, ya que de esta manera, queda constancia para otros usuarios con el mismo problema.... si no, podría estar respondiendo las mismas preguntas una y otra vez...;)

Me alegro que te funcione!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Kevin

Como mover un input cuando se introduce un valor erroneo

Publicado por Kevin (7 intervenciones) el 08/08/2014 19:05:29
Gracias por tu manera de ayudar ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Como mover un input cuando se introduce un valor erroneo

Publicado por andyman (2 intervenciones) el 13/08/2014 18:55:02
excelente efecto muchas gracias...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar