Mostrar cada error en su campo

Traducción automática

Esta página se tradujo automáticamente del inglés y todavía no la revisó un hablante nativo; las correcciones son bienvenidas en GitHub. Si algo no coincide, vale el original en inglés.

Tarea: rechazar un formulario malo y decir, junto a cada campo, qué está mal en él.

yaml

# Recipe: the rules live on the action; the form shows each refusal on its field.
paths:
  components: ./components
  migrations: ./migrations

datasources:
  db:
    driver: sqlite
    database: ./data/guests.db

sql

CREATE TABLE guests (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    email TEXT NOT NULL,
    age INTEGER NOT NULL
);

Las reglas se escriben una vez, en los q:params de la acción. El ui:form las lee y las pone en sus campos (required, minlength, type="number", min...), así que el navegador verifica primero. El servidor vuelve a verificar, todos los campos a la vez: cuando uno falla, la acción no se ejecuta, la página vuelve y cada campo muestra su propio mensaje.

xml

<q:component name="Guests">
  <!-- The rules are written once, on the action. The form reads them (UI-9)
       and the server checks them again (ACT-2), every field at once. -->
  <q:action name="register" method="POST">
    <q:param name="name" required="true" minlength="2" maxlength="60" />
    <q:param name="email" type="email" required="true" />
    <q:param name="age" type="integer" required="true" min="18" max="120" />
    <q:query name="added" datasource="db">
      INSERT INTO guests (name, email, age) VALUES (:name, :email, :age)
      <q:param name="name" value="{name}" type="string" />
      <q:param name="email" value="{email}" type="string" />
      <q:param name="age" value="{age}" type="integer" />
    </q:query>
    <q:redirect url="/" flash="{name} is on the list." />
  </q:action>

  <ui:window title="Guest list">
    <q:if condition="flash">
      <ui:alert variant="{flashType == 'error' and 'danger' or 'success'}">{flash}</ui:alert>
    </q:if>
    <ui:form on-submit="register">
      <ui:formitem label="Name"><ui:input bind="name" /></ui:formitem>
      <ui:formitem label="E-mail"><ui:input bind="email" /></ui:formitem>
      <ui:formitem label="Age"><ui:input bind="age" /></ui:formitem>
      <ui:button variant="primary">Add guest</ui:button>
    </ui:form>
  </ui:window>
</q:component>

En una prueba, error="field" verifica que el campo fue rechazado, y message= el texto que se muestra junto a él:

xml

<q:test name="a valid guest is added" page="/">
  <test:submit action="register" name="Ana" email="ana@example.com" age="30" />
  <test:expect redirect="/" flash="Ana is on the list." />
  <test:expect table="guests" count="1" where="name = 'Ana' AND age = 30" />
</q:test>

<q:test name="every broken field gets its own message" page="/">
  <test:submit action="register" name="A" email="not an address" age="12" />
  <test:expect redirect="/" />
  <test:expect error="name" message="Must be at least 2 characters" />
  <test:expect error="email" message="Must be a valid email" />
  <test:expect error="age" message="Must be at least 18 (got 12)" />
  <test:expect text="Must be at least 2 characters" />
  <test:expect table="guests" count="0" />
</q:test>

<q:test name="a missing field is refused as Required" page="/">
  <test:submit action="register" name="Ana" email="ana@example.com" />
  <test:expect error="age" message="Required" />
  <test:expect table="guests" count="0" />
</q:test>

text

tests/guests.test.q
  PASS  a valid guest is added
  PASS  every broken field gets its own message
  PASS  a missing field is refused as Required
3 passed, 0 failed

Las reglas y sus mensajes: ACT-2 y UI-9.

Mostrar cada error en su campo ​

Mostrar cada error en su campo