JQuery - Validacion de formulario con click y keyup

   
Vista:

Validacion de formulario con click y keyup

Publicado por Francisco (1 intervención) el 03/01/2016 22:15:54
Hola, no se mucho sobre como usar JQuery, y tengo un problema con la validación lo que quiero es que valide cuando envía un formulario y que también lo valide mientras se escribe, este es mi HTML:

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<div class="form-group">
            <div class="alert alert-danger text-center" style="display:none;" id="error">
                <strong>Adventencia: </strong>Debe completar todos los campos
            </div>
            <div class="alert alert-success text-center" style="display:none;" id="exito">
                <strong>Felicidades: </strong>Su registro ha sido guardado
            </div>
        </div>
		<form action="" method="get" accept-charset="utf-8">
			<div class="form-group">
				<label for="nombre" class="control-label col-md-2 col-md-offset-1">*Nombre (s):</label>
				<div class="col-md-6">
					<input type="text" class="form-control" id="nombre" placeholder="Nombre (s)">
					<span class="help-block"></span>
				</div>
			</div>
			<div class="form-group">
				<button type="submit" class="btn btn-primary" id="aceptar">Aceptar</button>
			</div>
		</form>
	</div>
	<!-- A qui se incluye Boostrap y JQuery -->
	<script src="js/jquery.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="jquery_ejemplo.js"></script>
</body>
</html>

y este el archivo js:

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
$(document).on("ready",inicio);
function inicio()
{
	$("span.help-block").hide();
	$("#aceptar").click(function()
	{
		if(obtener_datos() == false)
		{
			alert("Los campos no son correctos")
		}
		else
		{
			alert("Los campos son corresto, porfavor presione continuar")
		}
	});
	$("#aceptar").keyup(obtener_datos);
 
}
 
function obtener_datos()
{
	var nombre = document.getElementById("nombre").value;
	validacion_nombre = validar_nombre(nombre);
	if (validacion_nombre == false)
	{
		$("#exito").hide();
		$("#error").show();
		return false
	}
	// Si los datos estan bien, manda un menaje de exito
	else
	{
		$("#error").hide();
		$("#exito").show();
		return true
	}
}
 
function validar_nombre(dato)
{
	if( dato == null || dato.length == 0 || /^\s+$/.test(dato))
	{
		$("#texto_error").remove();
		$("#nombre").parent().parent().attr("class","form-group has-error has-feedback");
		$("#nombre").parent().children("span").text("Debe introducir su nombre").show();
		$("#nombre").parent().append("<span id='texto_error' class='glyphicon glyphicon-remove form-control-feedback'></span>");
 		return false;
	}
	else
	{
		$("#texto_error").remove();
		$("#nombre").parent().parent().attr("class","form-group has-success has-feedback");
		$("#nombre").parent().children("span").text("Debe introducir su nombre").show();
		$("#nombre").parent().append("<span id='texto_error' class='glyphicon glyphicon-ok form-control-feedback'></span>");
		return true;
	}
}
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

Validacion de formulario con click y keyup

Publicado por xve (557 intervenciones) el 04/01/2016 12:45:26
Hola Francisco, pero que error te da? o donde esta fallando?
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