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
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como mover un input cuando se introduce un valor erroneo

Publicado por xve (2100 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
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como mover un input cuando se introduce un valor erroneo

Publicado por xve (2100 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
sin imagen de perfil

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