karenpayneoregon/RequiredOnRight.html

## debugger.css
* {
    outline: 1px solid red;
}

    *:hover {
        outline: 2px solid blue;
    }

## debugHelper.js
var $debugHelper = $debugHelper || {};
$debugHelper = function () {

    /*
     * Add/remove debugger.css to the current page
     */

    var href = "lib/debugger.css";
    var addCss = function () {
        if (isCssLoaded(href) === true) {
            return;
        }
        var head = document.head;
        var link = document.createElement("link");

        link.type = "text/css";
        link.rel = "stylesheet";
        link.href = href;

        head.appendChild(link);
    };

    var removeCss = function () {

        if (isCssLoaded('debugger.css')) {
            document.querySelector(`link[href$="${href}"]`).remove();
        }

    };

    var toggle = function() {
        if (isCssLoaded(href) === true) {
            removeCss();
        } else {
            addCss();
        }
    }

    var isCssLoaded = function () {

        for (var index = 0, count = document.styleSheets.length; index < count; index++) {
            var sheet = document.styleSheets[index];

            if (!sheet.href) {
                continue;
            }

            if (sheet.href.includes(href)) {
                return true;
            }

        }

        return false;
    }

    return {
        addCss: addCss,
        removeCss: removeCss,
        isCSSLinkLoaded: isCssLoaded,
        toggle: toggle
    };
}();

## RequiredOnRight.html
<!DOCTYPE html>
<html lang="en">
<html>
<head>
    <meta charset="utf-8" />
    <title>Aria-disabled</title>
    <!--Bootstrap  v5.2.3-->
    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
    <script src="lib/debugHelper.js"></script>
    <!--suppress no favicon-->
    <link rel="shortcut icon" href="#">
    <style>
        h1 {
            display: inline-block;
            color: #000;
            line-height: 16px;
            border-bottom: 1px solid #bbb;
        }
    </style>
</head>
<body>
    <div class="container" role="main">

        <h1 class="fs-6 mt-5">Registration</h1>

        <form method="post"
              class="row g-3 needs-validation"
              style="width: 15em"
              role="form" novalidate>

            <div class="form-group">

                <div class="d-flex justify-content-between">
                    <div>
                        <label for="firstName"
                               class="required">
                            First name
                        </label>
                    </div>
                    <div>
                        <span class="text-muted">Required</span>
                    </div>
                </div>

                <input id="firstName"
                       class="form-control mb-2"
                       aria-label="First name" required />

                <div class="invalid-feedback">
                    Please enter your first name
                </div>

            </div>

            <div class="form-group">
                <div class="d-flex justify-content-between">
                    <div>
                        <label for="lastName"
                               class="required">
                            Last name
                        </label>
                    </div>
                    <div>
                        <span class="text-muted">Required</span>
                    </div>
                </div>
                <input id="lastName"
                       class="form-control mb-2"
                       aria-label="Last name" required />
                <div class="invalid-feedback">
                    Please enter your last name
                </div>
            </div>


            <div class="form-group">
                <div class="d-flex justify-content-between">
                    <div>
                        <label for="userName"
                               class="required">
                            User Name
                        </label>
                    </div>
                    <div>
                        <span class="text-muted">Required</span>
                    </div>
                </div>
                <input id="userName"
                       class="form-control mb-2"
                       aria-label="user name" required />
                <div class="invalid-feedback">
                    Please enter your user name
                </div>
            </div>
            <button id="postButton"
                    class="btn btn-primary"
                    type="submit"
                    aria-label="post information"
                    aria-disabled="True">
                Submit form
            </button>
        </form>

    </div>

    <script>

        // From Bootstrap
        (() => {
            'use strict';

            const forms = document.querySelectorAll('.needs-validation');

            Array.from(forms).forEach(form => {
                form.addEventListener('submit',
                    event => {
                        if (!form.checkValidity()) {
                            event.preventDefault();
                            event.stopPropagation();
                        }

                        form.classList.add('was-validated');
                    },
                    false);
            });

            var form = document.querySelector('form');
            form.addEventListener('submit',
                function (event) {
                    event.preventDefault();
                    alert('Posted');
                });
        })();

        /*
         * ALT+1 toggles adding/removing debugger.css
         */
        document.addEventListener('keydown', function (event) {

            if (event.key === '1' && event.altKey) {
                $debugHelper.toggle();
            }

        });

    </script>
</body>
</html>
	* {
	outline: 1px solid red;
	}

	*:hover {
	outline: 2px solid blue;
	}
	var $debugHelper = $debugHelper \|\| {};
	$debugHelper = function () {

	/*
	* Add/remove debugger.css to the current page
	*/

	var href = "lib/debugger.css";
	var addCss = function () {
	if (isCssLoaded(href) === true) {
	return;
	}
	var head = document.head;
	var link = document.createElement("link");

	link.type = "text/css";
	link.rel = "stylesheet";
	link.href = href;

	head.appendChild(link);
	};

	var removeCss = function () {

	if (isCssLoaded('debugger.css')) {
	document.querySelector(`link[href$="${href}"]`).remove();
	}

	};

	var toggle = function() {
	if (isCssLoaded(href) === true) {
	removeCss();
	} else {
	addCss();
	}
	}

	var isCssLoaded = function () {

	for (var index = 0, count = document.styleSheets.length; index < count; index++) {
	var sheet = document.styleSheets[index];

	if (!sheet.href) {
	continue;
	}

	if (sheet.href.includes(href)) {
	return true;
	}

	}

	return false;
	}

	return {
	addCss: addCss,
	removeCss: removeCss,
	isCSSLinkLoaded: isCssLoaded,
	toggle: toggle
	};
	}();
	<!DOCTYPE html>
	<html lang="en">
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Aria-disabled</title>
	<!--Bootstrap v5.2.3-->
	<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
	<script src="lib/debugHelper.js"></script>
	<!--suppress no favicon-->
	<link rel="shortcut icon" href="#">
	<style>
	h1 {
	display: inline-block;
	color: #000;
	line-height: 16px;
	border-bottom: 1px solid #bbb;
	}
	</style>
	</head>
	<body>
	<div class="container" role="main">

	<h1 class="fs-6 mt-5">Registration</h1>

	<form method="post"
	class="row g-3 needs-validation"
	style="width: 15em"
	role="form" novalidate>

	<div class="form-group">

	<div class="d-flex justify-content-between">
	<div>
	<label for="firstName"
	class="required">
	First name
	</label>
	</div>
	<div>
	<span class="text-muted">Required</span>
	</div>
	</div>

	<input id="firstName"
	class="form-control mb-2"
	aria-label="First name" required />

	<div class="invalid-feedback">
	Please enter your first name
	</div>

	</div>

	<div class="form-group">
	<div class="d-flex justify-content-between">
	<div>
	<label for="lastName"
	class="required">
	Last name
	</label>
	</div>
	<div>
	<span class="text-muted">Required</span>
	</div>
	</div>
	<input id="lastName"
	class="form-control mb-2"
	aria-label="Last name" required />
	<div class="invalid-feedback">
	Please enter your last name
	</div>
	</div>


	<div class="form-group">
	<div class="d-flex justify-content-between">
	<div>
	<label for="userName"
	class="required">
	User Name
	</label>
	</div>
	<div>
	<span class="text-muted">Required</span>
	</div>
	</div>
	<input id="userName"
	class="form-control mb-2"
	aria-label="user name" required />
	<div class="invalid-feedback">
	Please enter your user name
	</div>
	</div>
	<button id="postButton"
	class="btn btn-primary"
	type="submit"
	aria-label="post information"
	aria-disabled="True">
	Submit form
	</button>
	</form>

	</div>

	<script>

	// From Bootstrap
	(() => {
	'use strict';

	const forms = document.querySelectorAll('.needs-validation');

	Array.from(forms).forEach(form => {
	form.addEventListener('submit',
	event => {
	if (!form.checkValidity()) {
	event.preventDefault();
	event.stopPropagation();
	}

	form.classList.add('was-validated');
	},
	false);
	});

	var form = document.querySelector('form');
	form.addEventListener('submit',
	function (event) {
	event.preventDefault();
	alert('Posted');
	});
	})();

	/*
	* ALT+1 toggles adding/removing debugger.css
	*/
	document.addEventListener('keydown', function (event) {

	if (event.key === '1' && event.altKey) {
	$debugHelper.toggle();
	}

	});

	</script>
	</body>
	</html>