0

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";

   }

2
  • recuerda que existe las funciones toLowerCase() y toUpperCase() 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.
    – Layer
    Commented el 31 oct. 2020 a las 21:08
  • Ahora bien, si quieres hacerlo manual hay un problema con tu condicion, y es que includes() te devolvera true 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 dar true.
    – Layer
    Commented el 31 oct. 2020 a las 21:12

4 respuestas 4

0

amigo creo que tienes mal el condicional, lo tienes al revés

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( arrayNombre.includes(letras)){

    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( arrayTelefono.includes(numeros)){

    tieneNumeros=true;

   }else {
     tieneNumeros=false;
     document.getElementById("telefono-mensaje").innerHTML="El telefono debe contener solo numeros";
   }


}

sí quieres ver documentación sobre los includes te recomiendo esta página: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/includes

2
  • Esto no corrige el error amigo, es por lo que he explicado arriba, hay que cambiar el condicional o replantear la respuesta.
    – Layer
    Commented el 31 oct. 2020 a las 21:16
  • 1
    Tienes razón siempre van a retornar true porque sí contiene letras pero no significa que vaya a restringir los números en el caso del campo nombre Commented el 31 oct. 2020 a las 21:22
0

Podes usar la sentencia for of que te permite ya iterar sobre cada elemento de una cadena para el caso , en el código te comento la validación en el if

function validarNombre(){

    var nombre = document.getElementById("nombre").value;     
    
    for(letra of nombre){
     /*cualquier cadena*1 (menos el espacio ' ' ) daria un NaN como resultado
     de ahi la validacion siguiente en el if  , tiene que ser NaN osea numero y ademas no tiene 
     que se un espacio
     */
    if(!( isNaN(letra*1) ) && (letra!=' ') ){
   
    document.getElementById("nombre-mensaje").innerHTML="El nombre debe contener solo letras";
    }
    
    
    }
   
}

function validarTelefono(){

    var telefono = document.getElementById("telefono").value;
    for(numero of telefono){
     /*la logica inversa que validarNombre()
     queda a tu cuenta si importan los espacios o no 
     */
      if( isNaN(numero*1) ){
   
    document.getElementById("telefono-mensaje").innerHTML="El telefono debe contener solo numeros";
    }
    
    }
   
 
    
    

}








function validarFormulario(){
    var enviar = document.getElementById("enviar");
    enviar.addEventListener("click", function(e){
    e.preventDefault();
   
  validarNombre();
   
validarTelefono()

    } );
    
}



 validarFormulario()

 

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

0

Creo que lo que intentas realizar es algo parecido a esto:

Es verdad que en cierto punto se utiliza una expresion regular, pero es una expresion regular muy sencilla, la cual lo unico que hace es reemplazar los espacios por espacios vacios:

replace(/ /gi, "");

Ahora bien, la descripcion de lo que hace el codigo esta en el codigo como tal, sin embargo cabe destacar la siguiente funcion:

string.charCodeAt(0);

Esta funcion lo que te permite es obtener el valor ascii de un caracter, esto nos sirve para poder crear un rango de valores en el que el caracter es valido, en este caso el rango de valores lo saque de aqui:

introducir la descripción de la imagen aquí

como podemos ver, el rango de valores en el que el codigo ascii concuerda con una letra ya sea mayuscula o miscula es entre: 65-90 y 90-122

https://elcodigoascii.com.ar/

window.onload = ()=>{

  //Por si necesitas usar estos elementos
  const nombre = document.getElementById("nombre");
  const telefono = document.getElementById("telefono");
  const enviar = document.getElementById("enviar");
  const nombreMensaje = document.getElementById("nombre-mensaje");
  const telMensaje = document.getElementById("telefono-mensaje");
  
  //Mensajes de alerta al usuario
  const msjNombre = "El nombre debe contener solo letras";
  const msjTel = "El telefono debe contener solo numeros";

  //Para comprobar si UN SOLO caracter es una letra.
  function isLetter(character){
    const asciiVal = character.charCodeAt(0);
    return (asciiVal >= 65 && asciiVal <= 90) || asciiVal >= 97 && asciiVal <= 122;
  }

  //Para comprobar si UN SOLO caracter es interpretable como numero.
  function isNumber(number){
    return Number(number) || false;
  }

  //Retorna true si la cadena contiene solo LETRAS, en caso contrario retorna false
  function checkLetters(letters){

    const formatted = letters.trim().replace(/ /gi, "");

    for(let i = 0; i < formatted.length; i++){
      if(!isLetter(formatted[i])) return false;
    }

    return true;

  }

  //Retorna true si la cadena contiene solo NUMEROS, en caso contrario retorna false
  function checkNumbers(numbers){

    const formatted = numbers.trim().replace(/ /gi, "");

    for(let i = 0; i < formatted.length; i++){
      if(!isNumber(formatted[i])) return false;
    }

    return true;

  }
  
  function validateForm(ev){
     

     if((!checkLetters(nombre.value) || !checkNumbers(telefono.value))
     || nombre.value === "" || telefono.value === ""){
      ev.preventDefault();
      
      if(!checkLetters(nombre.value)) nombreMensaje.innerHTML = msjNombre;
      if(!checkNumbers(telefono.value)) telMensaje.innerHTML = msjTel;
     }
     
  }
  
  enviar.addEventListener("click", validateForm);

}
#nombre-mensaje , #telefono-mensaje{
  color: red;
  font-size: 1;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <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>
</body>
</html>

0

Es muy válido que no quieras realizar una expresión regular.

1.- Lo que yo te recomendaría es crear una función que reciba como parámetro la cadena a evaluar:

function validarNombre(cadena){}

2.- A la cadena que recibes le realizas un split('') esto se convertirá en un arreglo con todas las letras de tu cadena, incluyendo espacios en blanco:

cadena = cadena.split('');

3.- Ahora recorremos letra por letra y tratamos de convertirla a entero, si al multiplicar * 0 nos da 0, quiere decir que hay un número en nuestra cadena. Nos ayudaremos de un contador para contar cuántas veces aparece un número en nuestra cadena, ejemplo:

let contador = 0;
  
  cadena.forEach(letra=>{

        if((parseInt(letra)*0)===0){
          contador++;
        }
      });

4.- Ya por último validamos si el contador es mayor a 0 quiere decir que el nombre ingresado es inválido ya que hay un número ahí:

if(contador>0){
   return true;
 }else{
   return false;
 }

5.- Te dejo un ejemplo de la función y como puedes testearlo:

function validarNombre(cadena){
  cadena = cadena.split('');
  let contador = 0;
  
  cadena.forEach(letra=>{
    if((parseInt(letra)*0)===0){
      contador++;
    }
  });
  
 if(contador>0){
   return true;
 }else{
   return false;
 }
  
  }

console.log(validarNombre('Dieg9'));

6.- Ahora vamos con tu función validarNumero(cadena){} al igual que la anterior recibirá como parámetro la cadena a evaluar.

7.- Haremos prácticamente lo mismo solo que nos ayudaremos de la función isNaN() nos ayudará a saber si el arreglo recorrido no es un número, entonces quiere decir que en la cadena hay una letra, y por consecuencia el número es inválido.

8.- Te dejo un ejemplo de tu función y como puedes testearlo:

function validarNumero(cadena){
  cadena = cadena.split('');
  let contador = 0;
  
  cadena.forEach(letra=>{
    if(isNaN(letra)){
      contador++;
    }
  });
  
 if(contador>0){
   return true;
 }else{
   return false;
 }
  
  }

console.log(validarNumero('1234A')); 

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.