Holaa , quiero hacer un formulario corto para probar si me funciona que solo se ingrese letras en nombre y solo numeros en el input de telefono, intente pasar esos datos a un array y luego quiero compararlos al array de letras o numeros dependiendo del tipo de entrada de dato que se ingreso. Pero cuando quiero comprobar si en nombre existen las letras dentro del array de letras no funciona, me pasa lo mismo cuando ingreso numeros , no que que estaria haciendo mal:
function validarFormulario(){
var enviar = document.getElementById("enviar");
enviar.addEventListener("click", function(){
validarNombre();
validarTelefono();
} , false);
}
function validarNombre(){
var nombre = document.getElementById("nombre").value;
var arrayNombre = nombre.split("");
var letras = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z",
"a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
var tieneLetras=false;
if( letras.includes(arrayNombre)){
tieneLetras=true;
}else {
tieneLetras=false;
document.getElementById("nombre-mensaje").innerHTML="El nombre debe contener solo letras";
}
}
function validarTelefono(){
var telefono = document.getElementById("telefono").value;
var arrayTelefono = telefono.split("");
var numeros=["0","1","2","3","4","5","6","7","8","9"];
var tieneNumeros=false;
if( numeros.includes(arrayTelefono)){
tieneNumeros=true;
}else {
tieneNumeros=false;
document.getElementById("telefono-mensaje").innerHTML="El telefono debe contener solo numeros";
}
}
window.addEventListener("load" , validarFormulario,false);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/app.js"></script>
<title></title>
</head>
<body>
<form id="formulario">
Nombre:
<input type="text" name="nombre" id="nombre"><span id="nombre-mensaje"></span>
<br><br>
Telefono:
<input type="text" name="telefono" id="telefono"><span id="telefono-mensaje"></span>
<br><br>
<button type="submit" id="enviar">ENVIAR</button>
</form>
<style type="text/css">
#nombre-mensaje , #telefono-mensaje{
color: red;
font-size: 1
}
</style>
</body>
</html>
Tambien intente hacerlo con 2 for pero no se que me estaria faltando en el if(que esta en el for) para que funcione:
for (var i = 0; i <=arrayTelefono.length ; i++) {
for (var j = 0; j <=numeros.length ; j++) {
if(arrayTelefono[i]==numeros[j]){
tieneNumeros=true;
}
}
}
if (tieneNumeros) {
alert("ingreso correcto");
}else{
document.getElementById("telefono-mensaje").innerHTML="El telefono debe contener solo numeros";
}
toLowerCase()
ytoUpperCase()
las cuales te hubieran ahorrado repetir las letras mayusculas en minusculas, por otro lado, las expresiones regulares fueron hechas precisamente para resolver este tipo de problemas, son muy recomendadas para ello, pues estas resumen todo lo que intentas hacer en 2 o 3 lineas.includes()
te devolveratrue
si por lo menos 1 de los elementos coincide en tu caso las letras, pero y que pasa si le agregas un numero?, te va a seguir devolviendo true, porque si que hay letras, por ende deberas replantear tu condicion. para el caso del telefono tienes un problema similar, pues estas mirando si por lo menos uno de los numeros coincide con la lista, mas no estas teniendo en cuenta que pueden haber otro tipo de caracteres que igual te van a dartrue
.