Validar todos los campos de un formulario

 
En este artículo se muestra como recorrer los campos de un formulario para comprobar si se les ha establecido un valor, en caso de que estén vacíos, muestra un mensaje de alerta.

La función de ejemplo debe recibir un objeto formulario. en el ejemplo se muestra como enviar el formulario en el que está el botón, también se podría enviar con el método getelementbyid, por ejemplo:

<input type="button" onclick="comprobar_formulario(document.getElementById('formulario1'))" value="Enviar formulario 1"/>


La función primero comprueba que el objeto que recibe es un objeto formulario, en caso contrario intenta coger el primer formulario de la página.
A continuación recorre todos sus elementos y si es un "input-text", "input-password" ó "input-file", comprueba que tenga algún valor. Si viene vacío da un mensaje de alerta y establece el foco en él.
Si todos los campos vienen rellenos, envia el formulario.

La parte fundamental del código es la matriz elements del objeto form que contiene los objetos del formulario.

La siguiente línea, devolvería en el alert, el nombre del objeto (el atributo name), en caso de no tenerlo o no ser apropiado, habría que cambiarlo:
alert("Por favor rellene todos los campos del formulario, falta el campo " + oFormulario.elements[iCont].name);


El ejemplo, cogería el único formulario, el de la página de búsqueda.


En el HEAD:
<script language="javascript">
//Su explorador no soporta java o lo tiene deshabilitado; esta pagina necesita javascript para funcionar correctamente<!--
//Copyright © McAnam.com
// http://www.mcanam.com/articulos/JavaScript.php?id=30
    
    function comprobar_formulario(oFormulario)
    {
        
        // Se comprueba si se pasa bien el objeto formulario
        
        var iExiste = false;
        var iCont = 0;
        var sMensaje = "Por favor rellene todos los campos del formulario, faltan \n";
        
        for (iCont = 0 ; iCont < document.forms.length ; iCont++)
        {
            if (document.forms[iCont] == oFormulario)
                iExiste = true;
                
        }
        
        // No se ha pasado formulario, intentamos coger el primero del formulario
        if (! iExiste)
        {
            oFormulario = document.forms[0];
            if (! oFormulario)
            {
                alert("Formulario pasado incorrecto.\nNo se pudo encontrar formulario");
                return false;    
            }    
        }
        
        // Recorremos los elementos del formulario
        
        for (iCont = 0 ; iCont < oFormulario.elements.length ; iCont++)
        {
            if (oFormulario.elements[iCont].type == "text" || oFormulario.elements[iCont].type == "password" || oFormulario.elements[iCont].type == "file")
            {
                if (oFormulario.elements[iCont].value.length == 0)
                {
                    alert("Por favor rellene todos los campos del formulario, falta el campo " + oFormulario.elements[iCont].name);
                    oFormulario.elements[iCont].focus();
                    return false;
                }
            }
        }
        
        // Si hemos llegado aquí, todos los campos son correctos, enviamos el formulario
        
        oFormulario.submit();
        
    }
//-->
</script>

En el BODY:
<form name="formulario1" id="formulario1">
    Texto 1: <input type="text" name="texto1" id="texto1" /> <br />
    Texto 2: <input type="text" name="texto2" id="texto2" /> <br />
    Fichero: <input type="file" name="fichero" id="fichero" /> <br />
    Contraseña: <input type="password" name="contrasena" id="contrasena" /> <br />
    
    <input type="button" onclick="comprobar_formulario(this.form)" value="Enviar formulario 1"/> <br />
    
</form>

<form name="formulario2" id="formulario2">
    Texto 1: <input type="text" name="texto1" id="texto1" /> <br />
    Texto 2: <input type="text" name="texto2" id="texto2" /> <br />
    Fichero: <input type="file" name="fichero" id="fichero" /> <br />
    Contraseña: <input type="password" name="contrasena" id="contrasena" /> <br />
    
    <input type="button" onclick="comprobar_formulario(this.form)" value="Enviar formulario 2"/> <br />
    
</form>

Links relacionados:
Creador de formularios en HTML
Formulario para enviar archivos al servidor
Evento Submit de un formulario al pulsar intro
Enviar un formulario por correo electrónico en PHP
Enviar un formulario por correo electrónico con adjuntos en PHP
Guardar archivos enviados por un formulario en el servidor en PHP
Coger variables desde JavaScript
Formulario de contacto en Flash
Métodos de conexión HTTP


Para cualquier duda, consulta, sugerencia, opinión, colaboración, etc; no dude en ponerse en contacto con nosotros

Copyright © 2002-2017 [McAnam]. Reservados todos los derechos.
www.mcanam.com