Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Script to refactor the error box to make it more useful and easier to modify with CSS (style) rules.
<!-- 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");
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();
// 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");
parts[1].split(',').forEach(t => {
var li = document.createElement("li");
// 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;
e.innerHTML = '';
<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;
<!-- END script to reformat an error block on a donation page. -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.