Formularios en JavaScript

FormData lee los campos; la API de restricciones reporta la validez.

function submit(form) {
  form.addEventListener("submit", (event) => {
    event.preventDefault();

    const data = new FormData(form);
    const values = Object.fromEntries(data.entries());
    const langs = data.getAll("langs");

    const handle = form.elements.namedItem("handle");
    handle.setCustomValidity(
      values.handle?.length >= 3 ? "" : "at least three characters",
    );

    if (!form.checkValidity()) {
      form.reportValidity();
      return;
    }
    console.log({ ...values, langs });
  });
}

Cómo funciona

1. new FormData(form) junta cada control con nombre.
2. checkValidity corre las reglas propias del navegador.
3. setCustomValidity agrega una regla tuya.

Palabras clave y builtins usados aquí

• Object
• const
• function
• if
• return

El intento, en números

Líneas

20

Caracteres a escribir

460

Tokens

122

Ritmo de tres estrellas

100 tpm

Al ritmo de tres estrellas de 100 tokens por minuto, este intento toma unos 73 segundos.

Escribe este fragmento

Paso 1 de 2 en Formularios y almacenamiento; paso 7 de 13 en El navegador.

← Anterior Siguiente →