Validar los espacios en blanco – NO se permiten – Javascript

publicado por: Anonymous

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

solución

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

Ejemplo:

_x000D_

_x000D_

function validar(e) {_x000D_
 if (e.target.value.trim() == "")_x000D_
  alert("debe ingresar un valor en el campo");_x000D_
 else_x000D_
  alert("ingreso "+e.target.value.trim()+", es correcto!");_x000D_
}

_x000D_

<input onchange="validar(event)">

_x000D_

_x000D_

_x000D_

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.
...
...
...
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *