0

Tengo un formulario con varios campos en los cuales se tiene que valir que NO se introduzcan únicamente espacios en blanco. Si es así, debería mostrar un mensaje de error.

¿Cómo se controlarían los espacios? Por ejemplo en el campo nombre...

Tengo el siguiente código:

//Función que se encarga de validar los campos del formulario.
function validarCampos(evento){
    //Valido los diferentes apartados del formulario. Si todo está OK...
    if (validarCamposText(this) && comprobarNombre() && comprobarCantante() && comprobarAnio() && comprobarEstanteria() && confirm("¿Desea enviar el disco?")){
        return true;
        //Guardamos el disco en la tienda. Para ello tenemos la variable/objeto tienda llamada "miTienda".
        //Si todo está correcto, llamaremos a la función "GuardarDisco()". A la cuál tendremos que pasarle el objeto Disco, ¿no?
    }else{
        //Cancelar el evento por defecto del envío del formulario.
        evento.preventDefault();
        return false;
    }
}


//----------------------------------------------------------//
//Funcion para validar todos los campos input de tip "text".
function validarCamposText(objeto){
    //La propiedad form del botón enviar contiene la referencia del formulario dónde está ese botón submit.
    var formulario = objeto.form;

    //Recorremos en un array todos los elementos del formulario.
    for (var i=0; i<formulario.elements.length; i++){
        //Eliminamos la clase Error que estaría asignada a algún campo.
        formulario.elements[i].className="";
    }

    //Recorremos en un array todos los elementos del formulario.
    for (var i=0; i<formulario.elements.length; i++){
        //Escogemos los que son de tipo "text" y los que están vacíos...
        if (formulario.elements[i].type == "text" && formulario.elements[i].value==""){
            //Mostramos en un div, llamado "errores", un mensaje para el usuario de que el campo está vacío.
            document.getElementById("errores").innerHTML="El campo "+formulario.elements[i].name+" no puede estar vacío.";
            formulario.elements[i].className="error";
            formulario.elements[i].focus();
            return false;
        //Aprovechamos para tratar el campo "Año", sólo debería admitir un valor numérico entre 200 y 2017.
        }else if (formulario.elements[i].id=="anio"){
            if (isNaN(formulario.elements[i].value) || formulario.elements[i].value <2000 || formulario.elements[i].value >2017){
                document.getElementById("errores").innerHTML="El campo "+formulario.elements[i].name+" es incorrecto o el año no está entre 2000 y 2017.";
                formulario.elements[i].className="error";
                formulario.elements[i].focus();
                return false;
            }
        }else if (formulario.elements[i].id=="estanteria"){
            if (isNaN(formulario.elements[i].value) || formulario.elements[i].value <0 || formulario.elements[i].value >10){
                document.getElementById("errores").innerHTML="El campo "+formulario.elements[i].name+" es incorrecto o la estantería no está entre 0 o 10.";
                formulario.elements[i].className="error";
                formulario.elements[i].focus();
                return false;
            }
        }
    }
    return true;
}


//Función para comprobar que el campo nombre no está vacío.
function comprobarNombre(){
    if (!document.getElementById("nombre").value==""){
        var nombre = document.getElementById('nombre').value;
        //console.log(nombre);
    }else{
        document.getElementById("errores").innerHTML="El campo NOMBRE es obligatorio.";
        document.getElementById("nombre").focus();
        return false;
    }
}

//Función para comprobar que el campo cantante no está vacío.
function comprobarCantante(){
    if (!document.getElementById("cantante").value==""){
        var cantante = document.getElementById('cantante').value;
        //console.log(cantante);
    }else{
        document.getElementById("errores").innerHTML="El campo CANTANTE es obligatorio.";
        document.getElementById("cantante").focus();
        return false;
    }
}

//Función para comprobar que el campo anio no está vacío. Se deberá controlar con una expresión
//regular que tenga el formato: 2003, 2013, 2015... --> 4 dígitos.
function comprobarAnio(){
    //4dígitos.
    var patron = /^\d{4}$/;
    //Analizamos el patrón.
    if (patron.test(document.getElementById("anio").value)){
        document.getElementById("anio").className="";   
        return true;
    }else{
        document.getElementById("errores").innerHTML="El campo AÑO es obligatorio.";
        document.getElementById("anio").focus();
        return false;
    }
}

//Función para comprobar que el campo estanteria no está vacío.
function comprobarEstanteria(){
    if (!document.getElementById("estanteria").value==""){
        var estanteria = document.getElementById('estanteria').value;
        //console.log(estanteria);
    }else{
        document.getElementById("errores").innerHTML="El campo ESTANTERIA es obligatorio.";
        document.getElementById("estanteria").focus();
        return false;
    }
}
4
  • Como tú bien dices: "elimina todo espacio en blanco antes y después de un string" pero y si el nombre es "Juan José", ¿lo transforma en "JuanJosé"?
    – omaza1990
    el 23 may. 2017 a las 22:54
  • No, sólo quita los espacios en blanco antes de que empiece el string, y a partir de su último caracter.
    – Yikarus
    el 23 may. 2017 a las 23:05
  • ¿Entonces cómo quedaría por ejemplo para comprobarNombre()?
    – omaza1990
    el 23 may. 2017 a las 23:06
  • En el caso de preguntas sobre código que no funciona debe de incluirse un ejemplo mínimo verificable.
    – Rubén
    el 24 may. 2017 a las 0:09

2 respuestas 2

3

con el método String.prototype.trim() puedes lograrlo, este elimina los espacio en los extremos del string.

Ejemplo:

function validar(e) {
 if (e.target.value.trim() == "")
  alert("debe ingresar un valor en el campo");
 else
  alert("ingreso "+e.target.value.trim()+", es correcto!");
}
<input onchange="validar(event)">

En tu caso solo debes agregar a tu codigo el metodo .trim().

Ejemplo:

//Función para comprobar que el campo nombre no está vacío.
function comprobarNombre(){
    if (!document.getElementById("nombre").value.trim()==""){
        var nombre = document.getElementById('nombre').value;
        //console.log(nombre);
    }else{
...
...
...

Ejemplo:

//Recorremos en un array todos los elementos del formulario.
for (var i=0; i<formulario.elements.length; i++){
    //Escogemos los que son de tipo "text" y los que están vacíos...
    if (formulario.elements[i].type == "text" && formulario.elements[i].value.trim()==""){
        //Mostramos en un div, llamado "errores", un mensaje para el usuario de que el campo está vacío.
...
...
...
13
  • he modificado la respuesta colocando un ejemplo de lo que debes modificar en tu código, Saludos!! ;))...
    – fwBasic
    el 23 may. 2017 a las 23:15
  • Cierto es. Lo acabo de ver, pero me sigue aceptando los espacios como respuesta en un campo de tipo text. Introduzco como nombre: "espacios en blanco" y me lo acepta.
    – omaza1990
    el 23 may. 2017 a las 23:16
  • te recomiendo que al momento de asignar el valor a nombre, también uses el método .trim() de tal forma que el nombre no contenga espacio a la izquierda y derecha del nombre.
    – fwBasic
    el 23 may. 2017 a las 23:18
  • No sé porque me acepta los espacios en blanco...
    – omaza1990
    el 23 may. 2017 a las 23:19
  • Claro que te lo acepta!!.. le estas colocando la negación (!) al momento de preguntar, es decir: if (!nombre == "") es igual que colcocar: if (nombre != "")
    – fwBasic
    el 23 may. 2017 a las 23:20
0

Una solucion mas simple puede ser esta:

var input = document.getElementById('inputName');
input.addEventListener('input',function(){
     this.value = this.value.trim();
}) 

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.