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:
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
<!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
0
