diff --git a/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-next-to-controls/example.js b/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-next-to-controls/example.js
index b614c25e..53c61451 100644
--- a/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-next-to-controls/example.js
+++ b/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-next-to-controls/example.js
@@ -1,67 +1,57 @@
 ;(function () {
-  var validateInput
+  function getUrlParam(name) {
+    return new URLSearchParams(window.location.search).get(name)
+  }
 
-  $.urlParam = function (name) {
-    var results
-    results = new RegExp('[?&]' + name + '=([^&#]*)').exec(window.location.href)
-    if (results === null) {
-      return null
-    } else {
-      return decodeURI(results[1]) || null
+  function showError(input, message) {
+    let errorContainer = input.closest('fieldset') || input.parentElement
+    if (!errorContainer) return
+
+    const errorId = `${input.name}-error`
+    input.setAttribute('aria-describedby', errorId)
+    input.setAttribute('aria-invalid', 'true')
+
+    if (!document.getElementById(errorId)) {
+      const errorMessage = document.createElement('p')
+      errorMessage.id = errorId
+      errorMessage.className = 'error'
+      errorMessage.textContent = message
+      errorContainer.appendChild(errorMessage)
+    }
+
+    if (!document.querySelector(':focus')) {
+      input.focus()
     }
   }
 
-  validateInput = function (input, message) {
-    var $elementToDescribe,
-      $errorContainer,
-      $fieldset,
-      $input,
-      $referencedElement,
-      value
-    $input = $('[name="' + input + '"]')
-    if ((value = $.urlParam(input)) === null) {
-      $referencedElement = null
-      $elementToDescribe = null
-      $errorContainer = null
-      if ($input.is(':radio')) {
-        $fieldset = $input.closest('fieldset')
-        $elementToDescribe = $fieldset
-        $errorContainer = $fieldset
-        $referencedElement = $input.filter(':first')
-      } else {
-        $elementToDescribe = $input
-        $errorContainer = $input.parent()
-        $referencedElement = $input
-      }
-      $elementToDescribe.attr('aria-describedby', input + '_description')
-      $errorContainer.append(
-        '<p id="' + input + '_description" class="error">' + message + '</p>'
-      )
-      if ($(':not(body):focus').length === 0) {
-        // See https://stackoverflow.com/questions/46134247/jquery-setting-focus-doesnt-work-in-ie11/
-        return $referencedElement.focus()
-      }
+  function validateInput(name, message) {
+    const input = document.querySelector(`[name="${name}"]`)
+    if (!input) return
+
+    const value = getUrlParam(name)
+    if (!value) {
+      showError(input, message)
     } else {
-      if ($input.is(':checkbox')) {
-        $input.attr('checked', true)
-      }
-      if ($input.is(':radio')) {
-        return $input.filter('[value="' + value + '"]').attr('checked', true)
+      if (input.type === 'checkbox' || input.type === 'radio') {
+        document
+          .querySelector(`[name="${name}"][value="${value}"]`)
+          .setAttribute('checked', 'true')
       } else {
-        return $input.val(value)
+        input.value = value
       }
     }
   }
 
-  $(document).ready(function () {
-    if ($.urlParam('validate')) {
+  document.addEventListener('DOMContentLoaded', () => {
+    if (getUrlParam('validate')) {
       validateInput('name', 'Please enter your name!')
       validateInput('biography', 'Please tell us something about your history!')
       validateInput('gender', 'Please tell us your gender!')
       validateInput('accept_agbs', 'You must accept our terms and conditions!')
-      if ($('.error').length === 0) {
-        return alert('All inputs are valid.')
+
+      if (!document.querySelector('.error')) {
+        alert('All inputs are valid.')
       }
     }
   })
-}).call(this)
+})()
diff --git a/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-on-top/example.js b/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-on-top/example.js
index 43a22b01..015a4759 100644
--- a/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-on-top/example.js
+++ b/pages/examples/forms/validation-messages/_examples/form-validation-with-messages-on-top/example.js
@@ -1,83 +1,60 @@
 ;(function () {
-  var validateInput
+  function getUrlParam(name) {
+    return new URLSearchParams(window.location.search).get(name)
+  }
 
-  $.urlParam = function (name) {
-    var results
-    results = new RegExp('[?&]' + name + '=([^&#]*)').exec(window.location.href)
-    if (results === null) {
-      return null
-    } else {
-      return decodeURI(results[1]) || null
+  function showError(input, message) {
+    let errorContainer = document.querySelector('.errors ul')
+    if (!errorContainer) {
+      const fieldset = document.createElement('fieldset')
+      fieldset.className = 'errors'
+      fieldset.innerHTML = '<legend>Errors</legend><ul></ul>'
+      document.body.prepend(fieldset)
+      errorContainer = fieldset.querySelector('ul')
     }
+
+    const errorId = `${input.name}-error`
+    input.setAttribute('aria-describedby', errorId)
+    input.setAttribute('aria-invalid', 'true')
+
+    const errorItem = document.createElement('li')
+    errorItem.innerHTML = `<a href="#${input.id}" id="${errorId}" class="error">${message}</a>`
+    errorItem.querySelector('a').addEventListener('click', e => {
+      input.focus()
+      e.preventDefault()
+    })
+
+    errorContainer.appendChild(errorItem)
   }
 
-  validateInput = function (input, message) {
-    var $elementToDescribe,
-      $error,
-      $errorContainer,
-      $fieldset,
-      $input,
-      $referencedElement,
-      value
-    $input = $('[name="' + input + '"]')
-    if ((value = $.urlParam(input)) === null) {
-      if ($('fieldset.errors').length === 0) {
-        $('body').prepend(
-          '<fieldset class="errors"><legend>Errors</legend><ul></ul></fieldset>'
-        )
-      }
-      $referencedElement = null
-      $elementToDescribe = null
-      $errorContainer = $('fieldset.errors ul')
-      if ($input.is(':radio')) {
-        $fieldset = $input.closest('fieldset')
-        $elementToDescribe = $fieldset
-        $referencedElement = $input.filter(':first')
-      } else {
-        $elementToDescribe = $input
-        $referencedElement = $input
-      }
-      $error = $(
-        '<a href="#' +
-          $referencedElement.attr('id') +
-          '" id="' +
-          input +
-          '_description" class="error">' +
-          message +
-          '</a>'
-      )
-      $error.click(e => {
-        // If we rely on the link's href pointing to the input's ID, it doesn't trigger forms mode in screen readers
-        $referencedElement.focus()
-        return e.preventDefault()
-      })
-      $elementToDescribe.attr('aria-describedby', input + '_description')
-      $errorContainer.append('<li>').find('li:last').append($error)
-      if ($(':not(body):focus').length === 0) {
-        // See https://stackoverflow.com/questions/46134247/jquery-setting-focus-doesnt-work-in-ie11/
-        return $errorContainer.find('a').focus()
-      }
+  function validateInput(name, message) {
+    const input = document.querySelector(`[name="${name}"]`)
+    if (!input) return
+
+    const value = getUrlParam(name)
+    if (!value) {
+      showError(input, message)
     } else {
-      if ($input.is(':checkbox')) {
-        $input.attr('checked', true)
-      }
-      if ($input.is(':radio')) {
-        return $input.filter('[value="' + value + '"]').attr('checked', true)
+      if (input.type === 'checkbox' || input.type === 'radio') {
+        document
+          .querySelector(`[name="${name}"][value="${value}"]`)
+          .setAttribute('checked', 'true')
       } else {
-        return $input.val(value)
+        input.value = value
       }
     }
   }
 
-  $(document).ready(function () {
-    if ($.urlParam('validate')) {
+  document.addEventListener('DOMContentLoaded', () => {
+    if (getUrlParam('validate')) {
       validateInput('name', 'Please enter your name!')
       validateInput('biography', 'Please tell us something about your history!')
       validateInput('gender', 'Please tell us your gender!')
       validateInput('accept_agbs', 'You must accept our terms and conditions!')
-      if ($('.error').length === 0) {
-        return alert('All inputs are valid.')
+
+      if (!document.querySelector('.error')) {
+        alert('All inputs are valid.')
       }
     }
   })
-}).call(this)
+})()