Tutorial Completo de JavaScript para la Manipulación y Validación de Formularios Web

Introducción al Control de Formularios en JavaScript

Aprende a gestionar y validar los formularios de una página web utilizando JavaScript puro de manera eficiente.

Conteo y Extracción de Datos de Formularios

Número de formularios en la página

var nform = document.forms.length;
document.write("En esta página hay " + nform + " formularios");

Nombre de los formularios

for (i = 0; i <= nform; i++) {
    document.write("El nombre del formulario número " + (i + 1) + " es: ");
    document.write(document.forms[i].name);
}

Número de campos en el primer formulario

var ncampos = document.forms[0].elements.length;
document.write("En este formulario hay " + ncampos + " campos");

for (a = 0; a < ncampos; a++) {
    document.write("El nombre del campo número " + (a + 1) + " es: ");
    document.write(document.forms[0].elements[a].name);
}

Comparación de Elementos

Comparar nombres de los formularios

var comprueba = document.forms.length;
for (i = 0; i <= comprueba; i++) {
    for (j = i + 1; j <= comprueba; j++) {
        if (document.forms[i].name == document.forms[j].name) {
            document.write("El formulario " + (i + 1) + " y el formulario " + (j + 1) + " coinciden");
        } else {
            document.write("El formulario " + (i + 1) + " y " + (j + 1) + " no coinciden");
        }
    }
}

Comparar campos de un formulario con otro

var campos = document.forms.length;
for (i = 0; i <= campos; i++) {
    for (j = 0; j <= campos; j++) {
        if (document.forms[0].elements[i].name == document.forms[1].elements[j].name) {
            document.write("El campo " + (i + 1) + " y " + (j + 1) + " coinciden");
        } else {
            document.write("El campo " + (i + 1) + " y " + (j + 1) + " no coinciden");
        }
    }
}

Funciones de Validación y Envío

Función comprueba datos

function comprueba() {
    var nc = document.forms[0].elements.length;
    if (document.forms[0].elements[1].value.length < 6) {
        alert("La longitud del password 1 debe ser superior a 6 caracteres");
        document.forms[0].elements[1].focus();
        return 0;
    }
    if (document.forms[0].elements[1].value != document.forms[0].elements[2].value) {
        alert("Los valores de los password no son iguales");
        document.forms[0].elements[1].focus();
        return 0;
    }
}

Función pasa datos

function pasadatos() {
    var nc = document.forms[0].elements.length;
    for (j = 0; j < nc; j++) {
        if (document.forms[1].elements[j].value == document.forms[0].elements[j].value) {
            // Validación completada
        }
    }
    document.forms[0].submit();
}