Client Form Component

Overview

The Client Form component is the initial data entry form that captures essential customer information before generating vehicle inspection forms. It consists of four required fields and triggers the dynamic creation of vehicle forms.

HTML Structure

The client form is rendered within the .form-section container:

HTML
CSS

index.html:31-56

<section class="form-section">
    <h2>📋 Formulario ITV</h2>

    <div class="bloque1">
        <div class="input-group">
            <label for="nombre">Nombre</label>
            <input type="text" id="nombre" placeholder="Ingrese su nombre" required>
        </div>
        <div class="input-group">
            <label for="apellidos">Apellidos</label>
            <input type="text" id="apellidos" placeholder="Ingrese sus apellidos" required>
        </div>
        <div class="input-group">
            <label for="razonSocial">Razón Social</label>
            <input type="text" id="razonSocial" placeholder="Empresa o particular" required>
        </div>
        <div class="input-group">
            <label for="nAutos">Nº de Vehículos</label>
            <input type="text" id="nAutos" placeholder="Cantidad de vehículos" required>
        </div>
    </div>
    
    <button onclick="enviar()" id="enviar" class="btn-primary">
        Generar Formularios
    </button>
</section>

styles.css:64-71

.form-section {
    background: #ffffff;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    border: 1px solid #e5e7eb;
    border-top: 3px solid #667eea;
}

styles.css:97-106

.bloque1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #3b82f6;
    border-radius: 0.75rem;
    border-top: 3px solid #667eea;
}

styles.css:109-113

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

Form Fields

nombre

Type: Text input
ID: nombre
Required: Yes
Validation: Automatically capitalizes first character (script.js:509-515)
Purpose: Customer’s first name

apellidos

Type: Text input
ID: apellidos
Required: Yes
Validation: Automatically capitalizes first character (script.js:509-515)
Purpose: Customer’s last name(s)

razonSocial

Type: Text input
ID: razonSocial
Required: Yes
Validation: Automatically capitalizes first character (script.js:509-515)
Purpose: Business name or individual designation

nAutos

Type: Text input
ID: nAutos
Required: Yes
Validation:
- Only numeric input allowed (script.js:502-506)
- Min value: 1
- Max value: 50 (script.js:22-25, 489-499)
Purpose: Number of vehicles to inspect

enviar()

Main function that validates the client form and triggers vehicle form generation.

script.js:8-39

function enviar() {
    // Validar campos obligatorios
    const nombre = document.getElementById("nombre").value.trim();
    const apellidos = document.getElementById("apellidos").value.trim();
    const razonSocial = document.getElementById("razonSocial").value.trim();
    const nAutosInput = document.getElementById("nAutos").value.trim();

    // Validaciones básicas
    if (!nombre || !apellidos || !razonSocial || !nAutosInput) {
        mostrarError("Por favor, complete todos los campos obligatorios.");
        return;
    }

    numeroAutos = parseInt(nAutosInput);
    if (isNaN(numeroAutos) || numeroAutos <= 0 || numeroAutos > 50) {
        mostrarError("Por favor, ingrese un número válido de vehículos (1-50).");
        return;
    }

    // Limpiar formularios previos
    document.getElementById("formularios").innerHTML = "";
    vehiculosData = [];

    // Generar formularios para cada vehículo
    generarFormulariosVehiculos();

    // Agregar botón de calcular
    agregarBotonCalcular();

    // Mostrar animación de carga
    mostrarAnimacionCarga();
}

Parameters: None Returns: void Behavior:

Validates all required fields are filled
Validates vehicle count is between 1-50
Clears any existing vehicle forms
Generates new vehicle forms based on count
Adds calculate button
Shows loading animation

obtenerDatosCliente()

Retrieves client data from the form fields.

script.js:154-161

function obtenerDatosCliente() {
    return {
        nombre: document.getElementById("nombre").value.trim(),
        apellidos: document.getElementById("apellidos").value.trim(),
        razonSocial: document.getElementById("razonSocial").value.trim(),
        nAutos: numeroAutos
    };
}

Parameters: None Returns: Object

nombre (string): Customer first name
apellidos (string): Customer last name(s)
razonSocial (string): Business name
nAutos (number): Number of vehicles

inicializarEventos()

Sets up real-time validation and input enhancement for form fields.

script.js:487-516

function inicializarEventos() {
    // Validación en tiempo real para el número de vehículos
    const nAutosInput = document.getElementById("nAutos");
    nAutosInput.addEventListener("input", function() {
        const valor = parseInt(this.value);
        if (valor > 50) {
            this.value = 50;
            mostrarError("El número máximo de vehículos es 50.");
        }
        if (valor < 0) {
            this.value = "";
        }
    });

    // Permitir solo números en el campo de vehículos
    nAutosInput.addEventListener("keypress", function(e) {
        if (!/[0-9]/.test(e.key) && !['Backspace', 'Delete', 'Tab', 'Enter'].includes(e.key)) {
            e.preventDefault();
        }
    });

    // Capitalizar automáticamente nombres y apellidos
    const camposTexto = ['nombre', 'apellidos', 'razonSocial'];
    camposTexto.forEach(campo => {
        const input = document.getElementById(campo);
        input.addEventListener("input", function() {
            this.value = this.value.charAt(0).toUpperCase() + this.value.slice(1);
        });
    });
}

Parameters: None Returns: void Behavior:

Restricts vehicle count input to numeric values only
Enforces maximum of 50 vehicles
Auto-capitalizes first letter of text fields

CSS Classes

.form-section

Main container for the client form.

styles.css:64-71

.form-section {
    background: #ffffff;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    border: 1px solid #e5e7eb;
    border-top: 3px solid #667eea;
}

.bloque1

Grid container for input groups within the client form.

styles.css:97-106

.bloque1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 2px solid #3b82f6;
    border-radius: 0.75rem;
    border-top: 3px solid #667eea;
}

.input-group

Vertical flex container for label and input pairs.

styles.css:109-113

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn-primary

Primary button styling for the submit button.

styles.css:146-164

.btn-primary {
    margin: 2rem auto 0;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
    min-width: 200px;
    display: block;
}

Usage Example

<!-- Include the form section in your page -->
<section class="form-section">
    <h2>📋 Formulario ITV</h2>
    
    <div class="bloque1">
        <div class="input-group">
            <label for="nombre">Nombre</label>
            <input type="text" id="nombre" placeholder="Ingrese su nombre" required>
        </div>
        <div class="input-group">
            <label for="apellidos">Apellidos</label>
            <input type="text" id="apellidos" placeholder="Ingrese sus apellidos" required>
        </div>
        <div class="input-group">
            <label for="razonSocial">Razón Social</label>
            <input type="text" id="razonSocial" placeholder="Empresa o particular" required>
        </div>
        <div class="input-group">
            <label for="nAutos">Nº de Vehículos</label>
            <input type="text" id="nAutos" placeholder="Cantidad de vehículos" required>
        </div>
    </div>
    
    <button onclick="enviar()" id="enviar" class="btn-primary">
        Generar Formularios
    </button>
</section>

<script>
// Initialize event listeners when DOM is ready
document.addEventListener("DOMContentLoaded", function() {
    inicializarEventos();
});
</script>

Validation Rules

Field	Rule	Error Message
nombre	Required, non-empty	”Por favor, complete todos los campos obligatorios.”
apellidos	Required, non-empty	”Por favor, complete todos los campos obligatorios.”
razonSocial	Required, non-empty	”Por favor, complete todos los campos obligatorios.”
nAutos	Required, numeric, 1-50	”Por favor, ingrese un número válido de vehículos (1-50).”

Responsive Behavior

The form adapts to different screen sizes:

Desktop (>768px): Grid layout with auto-fitting columns
Tablet (768px): Single column layout (styles.css:439-442)
Mobile (<480px): Compressed padding and font sizes (styles.css:469-471)

Accessibility Features

All inputs have associated <label> elements with for attributes
Required fields marked with required attribute
Placeholder text provides input hints
Focus states with visible outlines (styles.css:133-138)
Error messages displayed visually via mostrarError() function

Core Functions

UI Components

Overview

HTML Structure

Form Fields

nombre

apellidos

razonSocial

nAutos

enviar()

obtenerDatosCliente()

inicializarEventos()

CSS Classes

.form-section

.bloque1

.input-group

.btn-primary

Usage Example

Validation Rules

Responsive Behavior

Accessibility Features

Build docs developers (and LLMs) love

Core Functions

UI Components

​Overview

​HTML Structure

​Form Fields

​nombre

​apellidos

​razonSocial

​nAutos

​Related Functions

​enviar()

​obtenerDatosCliente()

​inicializarEventos()

​CSS Classes

​.form-section

​.bloque1

​.input-group

​.btn-primary

​Usage Example

​Validation Rules

​Responsive Behavior

​Accessibility Features

Build docs developers (and LLMs) love

Overview

HTML Structure

Form Fields

nombre

apellidos

razonSocial

nAutos

Related Functions

enviar()

obtenerDatosCliente()

inicializarEventos()

CSS Classes

.form-section

.bloque1

.input-group

.btn-primary

Usage Example

Validation Rules

Responsive Behavior

Accessibility Features