Form Validation [Advanced]
Ready

This template explains how to show an advanced form summary validation on submit, this hightens the accessibility of the form enormously. 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/2.0.37/lib/localtapiola.css" integrity="sha384-5JYmtSD7nykpUvSmTW1CHMoBDkBZUpUmG0vuh+NUVtZag3F75Kr7+/JU3J7JV6Wq" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.duetds.com/api/css/2.0.37/lib/duet.min.css" integrity="sha384-HCyysBnZ5EIw1st8I3EG6DCaottRChl7hYlTqmsS8XzdgQsclbv9Edi5gsco2Wy3" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.duetds.com/api/tokens/3.0.37/lib/tokens.custom-properties.css" integrity="sha384-rxTcztOdY2IJ7Qut98AqRJJY5tXpDexWKN6csXh9raZkxudeSn7Ls9VHTrAC5qrs" crossorigin="anonymous" />
  <script type="module" src="https://cdn.duetds.com/api/components/6.8.0/lib/duet/duet.esm.js" integrity="sha384-Zfq/6W2+BlpcxzPPW3KBmFnMt/kp6c8a3Qv4kxzVne2kiawM8xJn43bLH5p1cNjQ" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.duetds.com/api/components/6.8.0/lib/duet/duet.js" integrity="sha384-tMnjay+Jjza4zk7VgrrMR1XNXGYmTi6fNcNP5kVgFumh5Hweu2AxlKJxeqLIdEO3" crossorigin="anonymous"></script>
</head>
<body>
<style>
  .duet-form-validation--hidden{
    display: none;
  }
</style>
<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-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-alert variation="danger" announcements="true" class="duet-form-validation duet-form-validation--hidden">
        </duet-alert>

        <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: '#' },
  ]

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

  var alert = document.querySelector(".duet-form-validation")

  //get items with errors
  function testForErrors(){
    var errors = []
    var form = document.querySelector("#form")
    var inputs = form.querySelectorAll("duet-input, duet-select, duet-textarea, duet-radio-group")
    for(var i = 0; i < inputs.length; i++){
      if(inputs[i].error){
        errors.push(inputs[i])
      }
    }
    return errors
  }

  // 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


    // 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)


    // this is a really simple implementation of a summary error handler
    // you should internationalize this in real useage and add additional error information to it - the key part is that a user should get a summary
    // and a capability to "jump" to the field that has an error.

    var itemsWithErrors = testForErrors()
    alert.innerHTML = ""
    itemsWithErrors.forEach((item, index)=>{
      var node = document.createElement("span")
      var link = document.createElement("duet-link")
      link.setAttribute("identifier", item.name || "")
      link.setAttribute("url", `#${item.name || ""}`)
      node.innerHTML = `${index+1}: `
      link.innerHTML = `the field "${item.name}" has an error</br>`
      node.appendChild(link)
      node.addEventListener("click", (event)=>{
        console.log(event,item)
        item.setFocus()
      })
      alert.classList.remove("duet-form-validation--hidden")
      alert.appendChild(node)
    })

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

<!DOCTYPE html>
<html class="duet-theme-turva 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>Turva</title>
  <link rel="stylesheet" href="https://cdn.duetds.com/api/fonts/2.0.37/lib/turva.css" integrity="sha384-hHdwZODJ+y2QoCpmMYq9dSnwexFN8FO9B9cVru7Y7iy2l3bXKpf/vNfPASXgfKWU" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.duetds.com/api/css/2.0.37/lib/duet.min.css" integrity="sha384-HCyysBnZ5EIw1st8I3EG6DCaottRChl7hYlTqmsS8XzdgQsclbv9Edi5gsco2Wy3" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.duetds.com/api/tokens/3.0.37/lib/tokens.custom-properties.css" integrity="sha384-rxTcztOdY2IJ7Qut98AqRJJY5tXpDexWKN6csXh9raZkxudeSn7Ls9VHTrAC5qrs" crossorigin="anonymous" />
  <script type="module" src="https://cdn.duetds.com/api/components/6.8.0/lib/duet/duet.esm.js" integrity="sha384-Zfq/6W2+BlpcxzPPW3KBmFnMt/kp6c8a3Qv4kxzVne2kiawM8xJn43bLH5p1cNjQ" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.duetds.com/api/components/6.8.0/lib/duet/duet.js" integrity="sha384-tMnjay+Jjza4zk7VgrrMR1XNXGYmTi6fNcNP5kVgFumh5Hweu2AxlKJxeqLIdEO3" crossorigin="anonymous"></script>
</head>
<body>
<style>
  .duet-form-validation--hidden{
    display: none;
  }
</style>
<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-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-alert variation="danger" announcements="true" class="duet-form-validation duet-form-validation--hidden">
        </duet-alert>

        <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: '#' },
  ]

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

  var alert = document.querySelector(".duet-form-validation")

  //get items with errors
  function testForErrors(){
    var errors = []
    var form = document.querySelector("#form")
    var inputs = form.querySelectorAll("duet-input, duet-select, duet-textarea, duet-radio-group")
    for(var i = 0; i < inputs.length; i++){
      if(inputs[i].error){
        errors.push(inputs[i])
      }
    }
    return errors
  }

  // 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


    // 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)


    // this is a really simple implementation of a summary error handler
    // you should internationalize this in real useage and add additional error information to it - the key part is that a user should get a summary
    // and a capability to "jump" to the field that has an error.

    var itemsWithErrors = testForErrors()
    alert.innerHTML = ""
    itemsWithErrors.forEach((item, index)=>{
      var node = document.createElement("span")
      var link = document.createElement("duet-link")
      link.setAttribute("identifier", item.name || "")
      link.setAttribute("url", `#${item.name || ""}`)
      node.innerHTML = `${index+1}: `
      link.innerHTML = `the field "${item.name}" has an error</br>`
      node.appendChild(link)
      node.addEventListener("click", (event)=>{
        console.log(event,item)
        item.setFocus()
      })
      alert.classList.remove("duet-form-validation--hidden")
      alert.appendChild(node)
    })

  }, 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

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.

Form Validation [Advanced] Ready

Integration

Tutorials

Building Layouts

Using CLI Tools

Creating Custom Patterns

Server Side Rendering

Sharing Prototypes

Usage With Markdown

Troubleshooting

Form Validation [Advanced]
Ready