Form Validation Ready
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.
<!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
TutorialsUsing CLI Tools
TutorialsCreating Custom Patterns
TutorialsServer Side Rendering
TutorialsSharing Prototypes
TutorialsUsage With Markdown
Troubleshooting
If you experience any issues while using a template, please head over to the Support page for more guidelines and help.