Validate the blanks - NOT allowed - Javascript

0

I have a form with several fields in which it must be valid NOT to enter blank spaces. If so, you should show an error message.

How would spaces be controlled? For example in the name field ...

I have the following code:

//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;
    }
}
    
asked by omaza1990 24.05.2017 в 00:43
source

1 answer

1

with the String.prototype.trim () method to achieve it, this eliminates the space at the ends of the string.

Example:

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

In your case you should only add the .trim() method to your code.

Example:

//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{
...
...
...

Example:

//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.
...
...
...
    
answered by 24.05.2017 / 01:08
source