Skip to main content

​
Client Registration

The client registration form is the first step in the ITV inspection workflow. This form captures essential customer information before generating vehicle inspection forms.

​
Overview

The client registration form collects basic information about the customer and the number of vehicles they need to inspect. All fields are required and include real-time validation to ensure data accuracy.

​
Form Fields

The registration form includes the following fields:
1

Enter Client Name

Fill in the Nombre (Name) field with the client’s first name.
  • Field ID: nombre
  • Type: Text input
  • Validation: Required, auto-capitalizes first letter
  • Placeholder: “Ingrese su nombre”
2

Enter Client Surname

Fill in the Apellidos (Surname) field with the client’s last name(s).
  • Field ID: apellidos
  • Type: Text input
  • Validation: Required, auto-capitalizes first letter
  • Placeholder: “Ingrese sus apellidos”
3

Enter Business Name

Fill in the Razón Social (Business Name) field with the company name or “Particular” for individual clients.
  • Field ID: razonSocial
  • Type: Text input
  • Validation: Required, auto-capitalizes first letter
  • Placeholder: “Empresa o particular”
4

Specify Number of Vehicles

Enter the Nº de Vehículos (Number of Vehicles) that need inspection.
  • Field ID: nAutos
  • Type: Numeric input
  • Validation: Required, 1-50 vehicles allowed, numbers only
  • Placeholder: “Cantidad de vehículos”
The system supports inspections for up to 50 vehicles per client. If you enter a number greater than 50, it will automatically be limited to 50.
5

Generate Vehicle Forms

Click the “Generar Formularios” (Generate Forms) button to create individual inspection forms for each vehicle.
  • Button ID: enviar
  • Function: enviar()
  • Effect: Validates all fields and generates dynamic vehicle forms
A loading animation will display while the forms are being generated.

​
Field Validation

The system performs automatic validation to ensure data quality:

​
Real-Time Validation

  • Auto-Capitalization: The first letter of nombre, apellidos, and razonSocial fields is automatically capitalized
  • Numeric Input: The nAutos field only accepts numeric values (0-9)
  • Range Validation: Number of vehicles must be between 1 and 50

​
Submit Validation

When clicking “Generar Formularios”, the system checks: 
// All fields must be filled
if (!nombre || !apellidos || !razonSocial || !nAutosInput) {
    mostrarError("Por favor, complete todos los campos obligatorios.");
    return;
}

// Number of vehicles must be valid
if (isNaN(numeroAutos) || numeroAutos <= 0 || numeroAutos > 50) {
    mostrarError("Por favor, ingrese un número válido de vehículos (1-50).");
    return;
}

​
Error Messages

The system displays styled error notifications for validation issues:
  • Missing Required Fields: “Por favor, complete todos los campos obligatorios.”
  • Invalid Vehicle Count: “Por favor, ingrese un número válido de vehículos (1-50).”
  • Exceeding Maximum: “El número máximo de vehículos es 50.”
Error messages appear in the top-right corner with a red alert styling and automatically dismiss after 5 seconds.

​
User Experience Features

​
Auto-Complete Behavior

  • Names and surnames automatically capitalize the first letter as you type
  • Numeric field prevents non-numeric input
  • Tab navigation follows logical field order

​
Visual Feedback

  • Loading animation appears when generating forms
  • Button displays ”⏳ Generando formularios…” during processing
  • Button is temporarily disabled during form generation to prevent duplicate submissions

​
Next Steps

After successfully completing client registration:
  1. Individual vehicle forms will be generated based on the number specified
  2. You can proceed to fill out vehicle inspection details for each vehicle
  3. The original registration form will remain visible for reference
All client information is stored in memory and will be included in the final inspection report. Make sure all details are accurate before generating vehicle forms.

​
Technical Reference

The registration form is defined in index.html:31-56 and processed by the enviar() function in script.js:8-39. Key functions:
  • enviar() - Main form submission handler
  • obtenerDatosCliente() - Retrieves client data object
  • inicializarEventos() - Sets up real-time validation
  • mostrarError() - Displays error notifications

Build docs developers (and LLMs) love

Get started for freeTalk to us