Get help Color blind mode Low vision mode

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 duet-sticky-footer" 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.duetds.com/api/fonts/3.0.18/lib/localtapiola.css" integrity="sha384-5JYmtSD7nykpUvSmTW1CHMoBDkBZUpUmG0vuh+NUVtZag3F75Kr7+/JU3J7JV6Wq" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.duetds.com/api/css/4.0.0/lib/duet.min.css" integrity="sha384-KeNjzo6R8WFjZWEYZd3aL0ECLsFelze+7ljixu7EdJYrz927Cx0dgDgeARmxtRWe" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.duetds.com/api/tokens/4.0.18/lib/tokens.custom-properties.css" integrity="sha384-TUOKkdeQ1gfQwKnPF3pNHJPj3+1XXTAyZnoiUP1UlBCTVYZJWNU9RI+82mComnXj" crossorigin="anonymous" />
  <script type="module" src="https://cdn.duetds.com/api/components/8.0.0/lib/duet/duet.esm.js" integrity="sha384-XNgC8GhyXZ75uSGSN/NM8jvyOtPrfyFTlO8VBDfSpPgw296goUAZzAKKrgbOdk0u" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.duetds.com/api/components/8.0.0/lib/duet/duet.js" integrity="sha384-TFMkho2BQ9Nnp2L9s/rhHw/6HiCqI1DW2I28mgqETM24PH2Kt2tkYCCtjFd71eDU" crossorigin="anonymous"></script>
</head>
<body>
<duet-header language="fi"></duet-header>
<duet-layout center>
  <div slot="main">
    <duet-card padding="large">
      <duet-spacer breakpoint="x-small" size="medium"></duet-spacer>
      <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" name="name" placeholder="Matti Meikäläinen" expand required>
        </duet-input>
        <duet-input label="Sähköposti" name="email" type="email" placeholder="nimi@email.com" required expand>
        </duet-input>
        <duet-select label="Kaupunki" name="city" placeholder="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 X button."
          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>
  </div>
</duet-layout>
<duet-footer logo-href="#" language="fi"></duet-footer>
<script>
  // Show back link in the header component
  var header = document.querySelector("duet-header")
  header.back = {
    label: "Takaisin",
    href: "/"
  }

  // Show data in the 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: '#' },
  ]

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

  // 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
npm install @duetds/css
npm install @duetds/fonts

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


Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

 Tutorials

Using CLI Tools

 Tutorials

Creating Custom Patterns

 Tutorials

Server Side Rendering

 Tutorials

Sharing Prototypes

 Tutorials

Usage With Markdown

Troubleshooting

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