Autocompletado de DNI RENIEC en formularios con JavaScript

Reducir la fricción durante el registro o checkout es clave para maximizar las ventas de cualquier plataforma web. Al solicitar el DNI, podemos autocompletar automáticamente el nombre completo del cliente.

Flujo de experiencia de usuario (UX)

1. El usuario tipea el 8vo dígito en el campo DNI.
2. Un evento input detecta la longitud de 8 caracteres.
3. Se dispara una petición fetch asíncrona a la API.
4. Los campos de Nombres, Apellido Paterno y Apellido Materno se llenan inmediatamente.

const dniInput = document.getElementById('dni');
const nombresInput = document.getElementById('nombres');

dniInput.addEventListener('input', async (e) => {
  const dni = e.target.value.trim();
  if (dni.length === 8 && /^[0-9]+$/.test(dni)) {
    try {
      const res = await fetch(`https://api.mlvapis.com/v1/dni/${dni}`, {
        headers: { 'Authorization': 'Bearer mlv_live_tu_token' }
      });
      if (res.ok) {
        const data = await res.json();
        nombresInput.value = `${data.nombres} ${data.apellido_paterno} ${data.apellido_materno}`;
      }
    } catch (error) {
      console.error('Error al consultar DNI:', error);
    }
  }
});

Nota: La información devuelta proviene estrictamente de fuentes públicas y abiertas en estricto cumplimiento del marco legal vigente.