0

Tengo un formulario validado, salvo por 1 detalle, en mi campo nombre, el usuario no puede dejarlo vacío, y debe escribir al menos 3 caracteres para ser un campo válido, si eso no se cumple, a la hora de dar a enviar el formulario, se hará focus en este campo junto con un mensaje de error indicando el propio error.

El caso es que si el usuario escribe 3 espacios en blanco y le da a enviar, la validación que tengo planteada se lo come y el formulario se envía con un nombre vacío técnicamente.

Estaba pensando en crear una expresión regular que lo que haga sea cuando hay al menos 2 o más espacios en blanco juntos, reemplazarlo por 1 solo espacio, de esta forma, la cadena de texto por muchos espacios que tuviese juntos, se reemplazarían por 1 solo, y no cumpliría la validación previa de 3 o más caracteres.

Lo pensé de esta forma para que no hubiese conflictos si el usuario escribía su nombre compuesto, en este caso al haber únicamente 1 solo espacio entre palabras, no ocurre nada.

He intentado hacer algo como:

if (c_nombre.value.length >= 3){

    c_nombre.value.replace(/  +/g, ' ');
}

Donde la variable c_nombre apunta al input en cuestión, y c_nombre.value apunta al valor de ese input.

Por si queréis ver el código completo de mi validación para tener más contexto os lo dejo aquí

    var formu = document.forms[0];
    var c_nombre= formu.nombre;
    var info_error = document.createElement("p");
    var text_name_empty = document.createTextNode("Por favor rellene el campo");
    var allcampoDiv = document.querySelectorAll(".campo");

 //Validar campo nombre
    if (c_nombre.value == ""||c_nombre.value.length<3){
        
        c_nombre.focus();
        c_nombre.classList.toggle("campoError");
        c_nombre.addEventListener("input", function(){
            if (c_nombre.value.length>=3){
                c_nombre.className="";
            }
        })
        if(c_nombre.value == ""){
            info_error.appendChild(text_name_empty);   
        }
        else if(c_nombre.value.length<4){
            var text_name_length = document.createTextNode("El nombre debe contener más de 3 letras");
            info_error.appendChild(text_name_length);
           
           
        }   
        allcampoDiv[0].before(info_error);
        allcampoDiv[0].addEventListener("change", function(){
            info_error.style.display="none";
        })
        return;
    }
    else{
        if (c_nombre.value.length >= 3){
            c_nombre.value.replace(/  +/g, ' ');
        }
        c_nombre.className="";  
    }

Pero de alguna forma al presionar el botón de enviar se lo sigue comiendo, no lo tengo bien planteado creo. ¿Se os ocurre algo?

4
  • ( +){2} Detecta 2 ó mas espacios en blanco juntos.
    – joseph l
    el 8 nov. 2022 a las 13:50
  • hola @josephl no sería el mismo caso de lo que tengo ya escrito? el 8 nov. 2022 a las 14:32
  • Y no te has planteado usar trim() sobre el valor del input en vez de acudir a una regex? el 8 nov. 2022 a las 16:25
  • El problema con usar trim es que si el nombre es compuesto como Juan Jesús, se cortan los espacios del principio y final de cadena, pero si se ponen 2 o más espacios entre palabras, trim( ) no va a solucionar eso. De ahí lo de una expresión regular, que siempre que vea 2 o más espacios en blanco, reemplazarlo por 1 espacio solo. De hecho lo propio sería usar las 2 cosas, trim para quitar espacios a principios y final de cadena, y la expresión regular para reemplazarlos. Tengo que ver como planteo algo así. el 8 nov. 2022 a las 21:50

2 respuestas 2

2

Este ejemplo elimina los espacios en blanco delante y detrás del texto.

var input = "     nombre      "
output = input.replace(/^ +/, "").replace(/ +$/, "")
console.log("_"+output+"_")

Equivalentemente:

var input = "     nombre      "
output = input.trim()
console.log("_"+output+"_")

Luego chequeas la longitud sobre la nueva variable y listo.

3
  • Hola hice ``` var c_nombre_output = c_nombre.value.trim(); ``` y con su correspondiente check de longitud, se valida bien ahora pero no sé por qué el nombre que el formulario envía es con espacios, por ejemplo hice una prueba con: " test test" y ese nombre pasa la validación y me llega al correo con los espacios, cuando deberían estar quitados no? no sé si me he explicado bien. el 8 nov. 2022 a las 14:29
  • @JuanJesús entonces tu input debe aceptar sólo una palabra. ¿Es lo que quieres validar? Y que la misma tenga al menos 3 caracteres. el 8 nov. 2022 a las 16:27
  • @MauricioContreras mi input puede y debe aceptar varias palabras por si el nombre es compuesto, con la última respuesta de joseph ya sé plantear esto, muchas gracias. el 8 nov. 2022 a las 21:55
1

Input que solo acepta un espacio entre letras y al perder foco remueve espacio al principio y al final:

function removerEspacios() {
       return  document.getElementById("nombre").value.replace(/(  +)/g, ' ');
}

function finalizar(){
        return document.getElementById("nombre").value.trim();
}
  <input type="text" id="nombre" oninput="this.value = removerEspacios();" onblur="this.value = finalizar()"/>

*En parte con el aporte de Ric Villalba

1
  • Me gusta, me has dado una idea para solucionar este problemilla, gracias Joseph ^^ el 8 nov. 2022 a las 21:56

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.