Script to refactor the error box to make it more useful and easier to modify with CSS (style) rules.

donation_clean_errors.html

<!-- BEGIN script to reformat an error block on a donation page. -->
<script type="text/css">
  document.addEventListener("DOMContentLoaded", () => {
    // The error text is composed of a couple of lines of text,
    // and (optionally) "Error fields:" followed by a comma-separated
    // list of errored fields.  This script reformats that into
    // something that can be decorated with CSS.
    var e = document.querySelector('.error');
    if (e !== null) {
      // We're using a fragment to make the error box change
      // as quickly as possible.
      var fragment = document.createDocumentFragment();

      // Split the error area into the text part and the
      // error field part.  The error field part can be empty.
      var parts = e.innerHTML.split(/Error\s+fields:/);

      // Format the text part into a div containing paragraphs.
      // Lost the stoooopid "Oh no".  I mean, really?!?
      if (parts.length > 0) {
        var textDiv = document.createElement("div");
        textDiv.classList.add("error-text-div");
        fragment.appendChild(textDiv);
        lines = parts[0].split('Please');
        lines[0] = lines[0].replace("Oh no, t", "T");
        lines[1] = "Please" + lines[1];
        // Split the text part into paragraphs.
        lines.forEach(t => {
          var p = document.createElement("p");
          p.innerHTML = t.trim();
          textDiv.appendChild(p);
        });
      }

      // If there is a list of fields, then change it from a long
      // comma-separted list of names into an HTML unordered list (<ul>).
      if (parts.length > 1) {
        var ul = document.createElement("ul");
        ul.classList.add('error-item-list');
        fragment.appendChild(ul);
        parts[1].split(',').forEach(t => {
          var li = document.createElement("li");
          li.classList.add('error-item');
          // If the field has a label, then use the contents of the
          // label instead of the field name.  Otherwise the field
          // name stays.
          t = t.trim();
          var e = document.querySelector(`*[name="${t}"]`);
          if (e !== null) {
            var p = (/select/.test(e.type) ? e.parentNode.parentNode : e.parentNode)
            var label = p.querySelector("label");
            if (label !== null) {
              t = label.innerHTML.replace(/[\*\:\(].*/, '');
            }
          }
          li.innerHTML = t;
          ul.appendChild(li);
        });
      }
      e.innerHTML = '';
      e.appendChild(fragment);
    }
  });
</script>
<style type="text/css">
  /* Hide the error message in the personal information part of the page. */
  #personal_information .error {
    display: none;
  }
  /* Sample CSS that modifies the error message using the changes from the script. */
.error {
  background-color: white;
  border-radius: 10px;
  border: 1pt solid red;
  color: black;
  font-size: 11pt;
  font-weight: normal;
  margin-bottom: 30px;
  padding: 20px;
  text-align: left;
}
.error-text-div {
  margin-bottom: 10px;
  text-align: center;
}
.error-text-line {
  word-wrap: break-word;
}
.error-item-list {
  border-top: 1pt solid red;
  margin-bottom: 0px;
  margin-top: 20px;
  padding-top: 10px; 
}
</style>
<!-- END script to reformat an error block on a donation page. -->