6

Buenos dias! Estoy hace unas horas pensando y no se donde se encuentra el error, tengo que validar que un nombre no contenga espacios!

function validarNombre(){
    var p1 = document.getElementById("nombre").value;  //tomamos en una variable lo ingresado en el login nombre
    
    var espacios = false;
    var cont = 0;
    
    while (!espacios && (cont < p1.length)) {
    	if (p1.charAt(cont) == " "){ 
    	espacios = true;
    	cont++;
    	}
    }
    
    if (espacios) { 
    	alert ("La contraseña no puede contener espacios en blanco"); 
    	return false; 
    }
    
    
    
    }
<div class="container">
    	<center><p class="usuario">Usuarios </p></center>
    		<div class="login">
    			<form name="login" method="post" action="#">
    				<label for="nombre">Nombre:</label><br>
    					<input type="text" onSubmit="return validarNombre()" id="nombre" name="nombre" value=""><br>
    				<label for="correo">Email:</label><br>
    					<input type="correo" name="correo" value=""><br>
    
    			<a href="#"> Suscribite Ahora </a>
    
    				<p class="submit" onclick="" > 
    				<input type="submit" name="commit" value="Login"></p>
    
    			</form>
    		</div>
    		
    </div>

Muchas gracias de antemano!

1
  • La contraseña o el nombre es el que no debe contener espacios? Commented el 26 oct. 2017 a las 13:15

4 respuestas 4

15

Hola tu código no es eficiente al comprobar caracter por caracter si tiene o no espacios, puedes usar regex o expresión regular, como esta para comprobarlo:

var p1 = document.getElementById("nombre").value;  //tomamos en una variable lo ingresado en el login nombre

var noValido = /\s/;

if(noValido.test(p1)){ // se chequea el regex de que el string no tenga espacio
     alert ("La contraseña no puede contener espacios en blanco"); 
    return false; 
}
else{
     alert ("Ok"); 
    return false; 
}

Como se menciona en los comentarios el código de arriba hace match con espacios, tab entre otros. Si solo se busca espacio hacerlo de la forma

var p1 = document.getElementById("nombre").value;  //tomamos en una variable lo ingresado en el login nombre

var noValido = / /;

if(noValido.test(p1)){ // se chequea el regex de que el string no tenga espacio
     alert ("La contraseña no puede contener espacios en blanco"); 
    return false; 
}
else{
     alert ("Ok"); 
    return false; 
}
6
  • 3
    Esta debiera ser marcada como la respuesta correcta @IbarraEmiliano
    – ffflabs
    Commented el 25 oct. 2017 a las 16:55
  • @amenadiel no te preocupes, igual queda para que sea consultado por otros.
    – Wilfredo
    Commented el 25 oct. 2017 a las 17:08
  • Esto no sólo coincide con un espacio, también coincide con tab, salto de página, salto de línea y enter. No es lo que se preguntó. La expresión regular que coincide con un espacio es / /
    – Mariano
    Commented el 26 oct. 2017 a las 0:22
  • 1
    @Mariano tienes toda la razón, en este caso creo que de igual forma le sirve al usuario que preguntó, de igual forma dentro de un rato hago el update a la respuesta con ambos tipos.
    – Wilfredo
    Commented el 26 oct. 2017 a las 19:30
  • 1
    @Wilfredo lo sé, seguramente sea más útil. Pero es habitual que se considere a \s sólo como espacio. Por eso me parecía bueno para otros lectores si podías aclararlo... Gracias por considerarlo.
    – Mariano
    Commented el 26 oct. 2017 a las 19:48
12

Nota: La solución basada en expresiones regulares también es válida, pero las expresiones regulares están pensadas para casos mas complejos. En tu caso que es mucho mas sencillo y específico indexOf() hace lo mismo con un mejor rendimiento.

No necesitas reiventar la rueda, si deseas verificar si un caracter existe o no dentro de una cadena utiliza la función .indexOf().

Si el resultado es -1 indica que la cadena pasada como parámetro (en tu caso " ") no ha sido encontrado en la cadena original. De lo contrario devuelve la posición donde se encontró la primera ocurrencia.

Ejemplo

function verificar() {
    console.clear();
    
    let cadena = document.getElementById("cadena").value;

    if (cadena.indexOf(" ") === -1) {
        console.log(`\"${cadena}\" no contiene espacios`);
    } else {
        console.log(`\"${cadena}\" contiene al menos un espacio`);
    }
}
Ingresa un valor: <input id="cadena" type="text"> <button onClick="verificar()">Verificar</button>

En tu caso el código puede quedar así

function validarNombre() {
    if (document.getElementById("nombre").value.indexOf(" ") !== -1) {
        alert("La contraseña no puede contener espacios en blanco");
        return false;
    }
}
5
  • 1
    también es correcto. Upvote para ti. ¿Ahora todos los browsers aceptan backticks para template literals?
    – ffflabs
    Commented el 25 oct. 2017 a las 16:54
  • Al menos en las últimas versiones Chrome, Firefox y Edge desktop Commented el 25 oct. 2017 a las 17:06
  • Pero si usa regex podría añadir otras comprobaciones al campo en una sola línea: por ejemplo no admitir más que letras, números y guiones (amazon AWS tiene esa regla para nombrar instancias, VPC, balanceadores, buckets, etc)
    – ffflabs
    Commented el 26 oct. 2017 a las 10:35
  • No es bueno juntar todas las comprabaciones en una única línea, siempre debe separarse en varias validaciones para poder mostrar un mensaje de error personalizado por cada uno. Commented el 26 oct. 2017 a las 19:41
  • No veo el por qué. Si el texto dice: "sólo se admiten letras, números y guiones", el mensaje de error no tiene por qué ser: "su texto contiene una ñ, recuerde que debe contener sólo letras, números y guiones". Para ese caso mejor poner "oiga, aprenda a leer, dijimos letras, números y guiones".
    – ffflabs
    Commented el 26 oct. 2017 a las 21:49
6

Tienes un loop infinito

function validarNombre(){
  var p1 = document.getElementById("nombre").value; 
  var espacios = false;
  var cont = 0;

  while (!espacios && (cont < p1.length)) {
    if (p1.charAt(cont) == " "){ 
    espacios = true;
    cont++; // Esto nunca ocurre!!
    }
  }

  if (espacios) { 
    alert ("La contraseña no puede contener espacios en blanco"); 
    return false; 
  }
  return true;
}

Debiera ser

function validarNombre(){
  var p1 = document.getElementById("nombre").value; 
  var espacios = false;
  var cont = 0;

  while (!espacios && (cont < p1.length)) {
    if (p1.charAt(cont) == " "){ 
      espacios = true;
    }
    cont++; // Esto sí ocurre 
  }

  if (espacios) { 
    alert ("La contraseña no puede contener espacios en blanco"); 
    return false; 
  }
  return true;
}

Te respondo esto para que salgas de la interrogante acerca de por qué no funciona. Sin embargo, la respuesta de Wilfredo es la manera correcta de hacer esta comprobación. Aprende expresiones regulares, te van a simplificar la vida. Aunque...

introducir la descripción de la imagen aquí

2
  • Buena explicación, hasta que llegué al último párrafo... Hace muchos años que trabajo con regex, y odio ese comic (nadie que programe en Perl debería quejarse de regex, creo que es una adaptación barata de otra frase famosa "now you have two problems"... Pero no creo que regex sea la mejor solución, String.indexOf() está para eso.
    – Mariano
    Commented el 26 oct. 2017 a las 0:19
  • Pienso que el chiste proviene del fenómeno llamado Maslow's Hammer. Eres experto en una herramienta y quieres usarla para todo. Luego a alguien se le ocurre parsear XML con regex y le explota el cerebro.
    – ffflabs
    Commented el 26 oct. 2017 a las 10:33
5

Algo más sencillo y sin usar regex, es hacer un split y contar la cantidad de valores que se encuentren, y en base a eso pasás a saber si hay o no espacios.

Admito que no es la gran solución, pero es algo básico y rápido de programar.

Ejemplo:

<script type="text/javascript">

    var nombre   = "john doe";
    var data     = nombre.split(" ");
    var palabras = data.length;

    if (palabras > 1) {
        console.log("Hay espacios.");
    } else {
        console.log("No hay espacios.");
    }

</script>

También, lo que podés hacer es usar indexOf() (como mencionan en un comentario anterior).

Ejemplo:

<script type="text/javascript">

    var nombre   = " johndoe";

    if (nombre.indexOf(" ") > -1) {
        console.log("Hay espacios.");
    } else {
        console.log("No hay espacios.");
    }

</script>
4
  • Otro upvote. Es válido aunque sea rudimentario.
    – ffflabs
    Commented el 25 oct. 2017 a las 16:55
  • 1
    ¿Probaste con " juanPerez" (con un espacio en la posición 0)?
    – Mariano
    Commented el 26 oct. 2017 a las 19:53
  • @Skollprog, es cierto, tienes que comprobar que indexOf sea distinto a -1, no que sea mayor a 0
    – ffflabs
    Commented el 26 oct. 2017 a las 21:46
  • 1
    @Mariano, tenés razón, se me pasó por alto ese detalle. Ahí modifiqué el código.
    – Skollprog
    Commented el 27 oct. 2017 a las 13:59

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.