Hola necesito ayuda con este código ya que con Jquery puse para que los caracteres de letras en los campos "edad,dni y altura" no se puedan escribir y tire una alerta pero ahora no me deja escribir nada, agradecería la ayuda y paso el código , Gracias!!
.js
$(document).ready(function(){
$("#botonEnviar").on("click", function(){
enviar();
});
$("#edad").keypress(function (e) {
$("#errorEdad").html(validarNumero(e)).show().fadeOut("slow");
return false;
});
$("#dni").keypress(function (e) {
$("#errorDni").html(validarNumero(e)).show().fadeOut("slow");
return false;
});
$("#altura").keypress(function (e) {
$("#errorAltura").html(validarNumero(e)).show().fadeOut("slow");
return false;
});
});
function validarNumero(e) {
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
//display error message
return "Por favor inserte caracteres numericos";
}else{
return false;
}
}
function enviar() {
var mensajes = "";
if ($("#nombre").val() == "") {
$("#nombre").addClass("bordeRojo");
mensajes += "Debes escribir el nombre \n";
}else{
$("#nombre").removeClass("bordeRojo");
}
if ($("#apellido").val() == "") {
$("#apellido").addClass("bordeRojo");
mensajes += "Debes escribir el apellido \n";
}else{
$("#apellido").removeClass("bordeRojo");
}
if ($("#dni").val() == "") {
$("#dni").addClass("bordeRojo");
mensajes += "Debes escribir el DNI \n";
}else{
$("#dni").removeClass("bordeRojo");
}
if ($("#edad").val() < 18) {
$("#edad").addClass("bordeRojo");
mensajes += "Debes ser mayor \n";
}else{
$("#edad").removeClass("bordeRojo");
}
if ($("#pais").val() != "Argentina") {
$("#pais").addClass("bordeRojo");
mensajes += "Debes ser residente Argentino \n";
}else{
$("#pais").removeClass("bordeRojo");
}
if ($("#altura").val() >= 180) {
$("#altura").addClass("bordeRojo");
mensajes += "Debes tener de altura 180 cm \n";
}else{
$("#altura").removeClass("bordeRojo");
}
if( mensajes != "" ){
alert( mensajes );
}else{
document.getElementById("miform").submit();
}
}
<html>
<head>
<title>Formulario</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css">
<link href="css/estilos.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<form action="" method= "post" class="miform">
<div id="formulario">
<div id="tituloInicio"></div>
<h1>Formulario de logueo</h1>
<p>Nombre:
<input id="nombre" class="miboton" ></p>
<p>Apellido:
<input id="apellido" class="miboton"></p>
<p>DNI:
<input id="dni" class="numero">
<span id="errorDni" class="textoRojo"></span></p>
<p>Edad:
<input id="edad" class="numero">
<span id="errorEdad" class="textoRojo"></span></p>
<p>Pais de residencia:
<input id="pais" class="miboton"></p>
<p>Altura:
<input id="altura" class="numero">
<span id="errorAltura" class="textoRojo"></span></p>
<input type=button value="Enviar" id="botonEnviar" />
</div>
</form>
</body>
</html>