Native valideringsstates

Opgavebeskrivelse

Formularen har de rigtige felttyper, men endnu ingen constraints eller styles for et valideringsforsøg.

  1. Gør e-mail, adgangskode og accept af vilkår påkrævede med required.
  2. Giv adgangskoden en minimumslængde på otte tegn.
  3. Skjul .error-message som udgangspunkt.
  4. Brug .form-group:has(:user-invalid) til at style feltgruppen og vise dens fejlbesked efter brugerinteraktion eller et submitforsøg.
  5. Brug både tekst og en tydelig kant eller outline. Farve må ikke stå alene.

Prøv først at tabbe gennem felterne uden at skrive. Prøv derefter at indsende formularen. Sammenlign :user-invalid med den invalid-state, der vises under Valideringsstates.

Der er bevidst ikke tilføjet novalidate: browserens constraints, fokusflytning og CSS-pseudoklasser er en del af denne øvelse.

<main>
  <section class="signup" aria-labelledby="signup-title">
    <p class="eyebrow">Profil</p>
    <h1 id="signup-title">Opret din profil</h1>
    <p>Alle felter er påkrævede.</p>

    <form aria-labelledby="signup-title">
      <div class="form-group">
        <label for="email">E-mail</label>
        <input
          id="email"
          name="email"
          type="email"
          autocomplete="email"
        >
        <p class="error-message" id="email-error">Skriv en gyldig e-mailadresse.</p>
      </div>

      <div class="form-group">
        <label for="password">Adgangskode</label>
        <p id="password-instruction">Brug mindst otte tegn.</p>
        <input
          id="password"
          name="password"
          type="password"
          autocomplete="new-password"
          aria-describedby="password-instruction"
        >
        <p class="error-message" id="password-error">Adgangskoden skal bestå af mindst otte tegn.</p>
      </div>

      <div class="form-group terms">
        <label for="terms">
          <input id="terms" name="terms" type="checkbox" value="accepted">
          Jeg accepterer vilkårene
        </label>
        <p class="error-message" id="terms-error">Du skal acceptere vilkårene.</p>
      </div>

      <button>Opret profil</button>
      <p class="status" role="status"></p>
    </form>
  </section>
</main>
Preview

Syntaks

<input required minlength="8">