Skip to main content
LocalTapiola Turva

Form Validation ready

This template explains how to show and hide form validation errors in an accessible way when user tries to submit a form with required fields that are empty.

Hint: Press F on your keyboard to view both templates and components in fullscreen and ESC to exit the fullscreen mode. You can also open the template in a new browser window.


Open in new window
<!DOCTYPE html>
<html class="duet-bg-gradient" lang="fi">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>LähiTapiola</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@duetds/fonts@latest/lib/localtapiola.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@duetds/fonts@latest/lib/turva.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@duetds/css@latest/lib/duet.min.css" />
  <script type="module" src="https://cdn.jsdelivr.net/npm/@duetds/components@2.6.10/lib/duet/duet.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/@duetds/components@2.6.10/lib/duet/duet.js"></script>
</head>
<body>
<duet-nav language="fi"></duet-nav>
<duet-layout nav-distance="with-links" center>
  <duet-card padding="large">
    <form id="form" action="#" novalidate>
      <duet-heading level="h1" visual-level="h2">Ota yhteyttä</duet-heading>
      <duet-paragraph>
        Lähetä meille viesti kun haluat antaa palautetta tai pyytää yhteydenottoa. Jos olet jo asiakkaamme, asiasi hoituu parhaiten, kun kirjaudut verkkopalveluun.
      </duet-paragraph>
      <duet-spacer size="medium"></duet-spacer>
      <duet-input label="Nimi" placeholder="Matti Meikäläinen" expand required></duet-input>
      <duet-input label="Sähköposti" type="email" placeholder="nimi@email.com" required expand></duet-input>
      <duet-select label="Kaupunki" value="valitse" expand></duet-select>
      <duet-textarea label="Viesti asiakaspalveluun" placeholder="Kirjoita tähän" tooltip="Hello, I’m a tooltip! To close me, you can click outside of the tooltip, hit ESC key or click the icon again." expand></duet-textarea>
      <duet-radio-group label="Yhteydenoton syy" direction="horizontal" name="group1">
        <duet-radio label="Palaute" value="one"></duet-radio>
        <duet-radio label="Yhteydenottopyyntö" value="two"></duet-radio>
      </duet-radio-group>
      <duet-spacer size="x-large"></duet-spacer>
      <duet-button submit variation="primary">Lähetä viesti</duet-button>
      <duet-button>Keskeytä</duet-button>
    </form>
  </duet-card>
</duet-layout>
<duet-footer logo-href="#" language="fi"></duet-footer>
<script>

  // Show back link in the nav component
  var nav = document.querySelector("duet-nav")
  nav.back = {
    label: "Takaisin",
    href: "/"
  }

  // Feed items into our select menu
  var select = document.querySelector("duet-select")
  select.items = [
    { label: "Valitse…", value: "valitse" },
    { label: "Helsinki", value: 1 },
    { label: "Tampere", value: 2 },
    { label: "Vantaa", value: 3 },
    { label: "Espoo", value: 4 }
  ]

  // Feed menu items into our footer component
  var footer = document.querySelector("duet-footer")
  footer.items = [
    { label: "Hae korvausta", href: "#", icon: "navigation-make-claim" },
    { label: "Osta vakuutus", href: "#", icon: "action-buy-insurance" },
    { label: "Yhteystiedot", href: "#", icon: "form-tel" }
  ]
  footer.menu = [
    { label: "Turvallisuus ja käyttöehdot", href: "#" },
    { label: "Evästeet", href: "#" },
    { label: "Henkilötietojen käsittely", href: "#" },
  ]

  // Prevent normal submission of the form
  var form = document.querySelector("#form")
  form.addEventListener("submit", function(event) {
    event.preventDefault()
  }, false)

  // When the submit button is clicked do fake validation for demo purposes
  var submit = document.querySelector("duet-button")
  submit.addEventListener("click", function(e) {
    e.preventDefault()
    e.stopPropagation()

    // Show error in the first input, announce it to the screen reader,
    // and finally set focus on this first input so that user can fix the error.
    var errorMsg = "Virhe: Tämä kenttä on pakollinen"
    var input = document.querySelector("duet-input")
    input.error = errorMsg
    input.setFocus()

    // Show additional errors in different type of components for demo
    var email = document.querySelectorAll("duet-input")[1]
    email.error = errorMsg
    var select = document.querySelector("duet-select")
    select.error = errorMsg
    var textarea = document.querySelector("duet-textarea")
    textarea.error = errorMsg
    var radioGroup = document.querySelector("duet-radio-group")
    radioGroup.error = errorMsg

    // Finally, for demo purposes, let’s add change listeners for the
    // form fields that remove the error when something is inputted
    input.addEventListener("duetChange", function() {
      input.error = ""
    }, false)
    email.addEventListener("duetChange", function() {
      email.error = ""
    }, false)
    select.addEventListener("duetChange", function() {
      select.error = ""
    }, false)
    textarea.addEventListener("duetChange", function() {
      textarea.error = ""
    }, false)
    radioGroup.addEventListener("duetChange", function() {
      radioGroup.error = ""
    }, false)

  }, false)
</script>
</body>
</html>

Integration

To install this template’s dependencies into your project, run:

npm install @duetds/components --save-dev
npm install @duetds/css --save-dev
npm install @duetds/fonts --save-dev

For further guidelines, please see each package’s documentation.

Troubleshooting

If you experience any issues while using a template, please head over to the Support page for more guidelines and help.