Skip to main content

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.14/lib/localtapiola.css" integrity="sha384-5JYmtSD7nykpUvSmTW1CHMoBDkBZUpUmG0vuh+NUVtZag3F75Kr7+/JU3J7JV6Wq" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.duetds.com/api/css/2.0.14/lib/duet.min.css" integrity="sha384-EA4ZTkhhTGhrl0SlA5NJgrgVYLSba4rJvUm9+QmLXKbuzLAj+i306sn22rxZ4Ucy" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.duetds.com/api/tokens/3.0.14/lib/tokens.custom-properties.css" integrity="sha384-rxTcztOdY2IJ7Qut98AqRJJY5tXpDexWKN6csXh9raZkxudeSn7Ls9VHTrAC5qrs" crossorigin="anonymous" />
<script type="module" src="https://cdn.duetds.com/api/components/6.2.6/lib/duet/duet.esm.js" integrity="sha384-ay60srz+2qUcWAFHJGXhphcMwoUqCQ9ZU7qlO5KCK0Muvz2CKpxJMDhRB7yt8/9g" crossorigin="anonymous"></script>
<script nomodule src="https://cdn.duetds.com/api/components/6.2.6/lib/duet/duet.js" integrity="sha384-CwrT4zTXcHj7tiTgk4ukqaifLVYpq3z1AK7KFisMpL2zh3pZU96F3YmNf7ro53Cp" 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

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.