Can validity api provide a means of displaying errors in a list format?

Question

Can validity api provide a means of displaying errors in a list format?

Currently, I'm working on developing a contact form and attempting to utilize the validity API for the first time. Adapting to WCAG2.1 standards has posed some challenges, but I've managed to display errors underneath each field as I code. However, I also need a feature that displays a list of invalid fields at the top of the form when it is submitted.

    
                // JavaScript code snippet goes here...


                /* CSS styling rules go here... */


                <!-- HTML code snippet goes here... -->

Please disregard the CSS for now, as I will work on refining it when integrating with our website.

javascript html css

Answer 1

Answer №1

Consider implementing a div element to contain the error list, positioning it at the top of the form.

You can then easily incorporate some code into your showError() function. In this example, I simply checked the text content of the various error span elements you have already created. If an error is present, it will be displayed on top of the form.

const form  = document.getElementsByTagName('form')[0];
    const email = document.getElementById('mail');
    // More JavaScript code snippets...

body {
    font: 1em sans-serif;
    width: 200px;
    padding: 0;
    margin : 0 auto;
  }
  /* More CSS styling... */

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-3.6.0.min.js"></script>
    <script src="kontaktskjema.js"></script>
    <link rel="stylesheet" href="kontakt.css">
    <meta charset="utf-8">
    <title>Detailed custom validation</title>
</head>
<body>
    <div class="errorsOutput"></div>
    <div class="kontaktskjema">
        <form novalidate>
          <p>
          <label for="navn">
          <span>Navn:</span>
        <input type="text" id="navn" name="navn" required minlength="3">
        <span class="error" aria-live="polite"></span>
      </label>
    </p>    
  </div>
    </body>
</html>

Answer 2

Consider implementing a div element to contain the error list, positioning it at the top of the form.

You can then easily incorporate some code into your showError() function. In this example, I simply checked the text content of the various error span elements you have already created. If an error is present, it will be displayed on top of the form.

const form  = document.getElementsByTagName('form')[0];
    const email = document.getElementById('mail');
    // More JavaScript code snippets...

body {
    font: 1em sans-serif;
    width: 200px;
    padding: 0;
    margin : 0 auto;
  }
  /* More CSS styling... */

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-3.6.0.min.js"></script>
    <script src="kontaktskjema.js"></script>
    <link rel="stylesheet" href="kontakt.css">
    <meta charset="utf-8">
    <title>Detailed custom validation</title>
</head>
<body>
    <div class="errorsOutput"></div>
    <div class="kontaktskjema">
        <form novalidate>
          <p>
          <label for="navn">
          <span>Navn:</span>
        <input type="text" id="navn" name="navn" required minlength="3">
        <span class="error" aria-live="polite"></span>
      </label>
    </p>    
  </div>
    </body>
</html>

Can validity api provide a means of displaying errors in a list format?

Answer №1

Similar questions

What is the method for placing a title in the initial column with the help of v-simple-table from Vuetify.js?

passing parameters via routes

Access the data within a jsonArray using Cypress

jquery ajax function that returns an object when successful

Create a form button that triggers the execution of a Python function

Why are the variables not reflecting the changes when an event is triggered?

An error occurred with redirecting using jQuery Mobile's new method in version 1.5

Downloading a PDF file on the server is not supported by React

Having trouble with the Bootstrap 5 modal in the initial template?

Modify the color of the object model when clicked - Three.js

How can I make my webpage fill the entire width of an iPhone screen when in landscape mode using Angular or React?

Enhancing Performance of D3 JS for Visualizing Large XML Data

The res.send() function is being executed prior to the async function being called in express.js

Filter the object by its unique identifier and locate the entry with the highest score

FormData causing unexpected behavior with pathInfo()

Guide to positioning a logo at the center of a bootstrap navbar

What could be the reason for the Checkbox's value not showing up after making changes?

Understanding the mechanism of callback function in NodeJS within the context of routes and controllers

Guide for displaying an image exclusively on the front side of a JSON model object using Three Js

What is the best way to initiate WebXR from an iframe in a Next.js environment?