3.3.4: Error Prevention (Legal, Financial, Data)

Using a Confirmation Page

Provide a confirmation page where users can review their inputs before final submission.

<form id="transactionForm">
  <!-- Input fields -->
  <button type="button" onclick="showReviewPage()">Review</button>
</form>

<div id="reviewPage" style="display:none;">
  <h2>Review Your Transaction</h2>
  <p id="transactionDetails"></p>
  <button type="button" onclick="editTransaction()">Edit</button>
  <button type="submit" onclick="submitTransaction()">Confirm</button>
</div>

<script>
function showReviewPage() {
  document.getElementById('transactionForm').style.display = 'none';
  document.getElementById('reviewPage').style.display = 'block';
  // Populate review page with transaction details
}

function editTransaction() {
  document.getElementById('reviewPage').style.display = 'none';
  document.getElementById('transactionForm').style.display = 'block';
}

function submitTransaction() {
  // Submit the form
}
</script>
            

Providing Inline Error Messages

Ensure that errors are highlighted immediately next to the respective fields, allowing users to correct them instantly.

<form id="dataForm">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <span id="emailError" class="error-message"></span>

  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('dataForm').addEventListener('submit', function(event) {
  var emailField = document.getElementById('email');
  var emailError = document.getElementById('emailError');

  if (!emailField.value.includes('@')) {
    event.preventDefault();
    emailError.textContent = 'Please enter a valid email address.';
    emailField.classList.add('error');
  } else {
    emailError.textContent = '';
    emailField.classList.remove('error');
  }
});
</script>
            

Implementing Confirmation Dialogs

Use confirmation dialogs for critical actions to prevent accidental submissions.

<form id="criticalForm">
  <!-- Form fields -->
  <button type="button" onclick="confirmSubmission()">Submit</button>
</form>

<script>
function confirmSubmission() {
  if (confirm("Are you sure you want to submit this form?")) {
    document.getElementById('criticalForm').submit();
  }
}
</script>
            

Testing and Iteration

Regularly test the error prevention mechanisms to ensure they are effective and accessible. Use both manual testing and automated tools to identify and address potential issues. Conduct usability testing with real users to gather feedback and make necessary improvements.