Jeremy Danyow jdanyow

left	center	right	none
😊	😊	😊	😊
aaaaaaaaaaaaaaaaaaaaa	aaaaaaaaaaaaaaaaaaa	aaaaaaaaaaaaaaaaa	aaaaaaaaaaaaaaaaa

Code to tack on custom validation UX to HTML annotated with HTML5 validation attributes as well as custom attributes for validations specific to our domain (eg max tag count).

Error alert is generated, each error links to the form input that is invalid.

This code is coupled to the design system's structure for form html and custom validation. In this case it's primer: https://primer.style/css/components/forms#error

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>GistRun</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<h1>Hello world!</h1>
	<form id="myForm">

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Standard page title</title>
	<style>
	@media print {
	.hidden-print {
	display: none;
	}

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>GistRun</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@primer/[email protected]/dist/primer.css" integrity="sha256-0PtaET8NN28OuNfpLRetkG6xdDLuTDYdIb8nZzpPLlQ=" crossorigin="anonymous">

	<!-- UNCOMMENT FIX: -->
	<!--
	<style>

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>GistRun</title>
	<style>
	:root {
	--duration: 1500ms;
	--timing: cubic-bezier(.5,0,0,1)
	}

	import escape_html from "escape-html";
	import { Readable } from "stream";
	// following imports are for testing
	import { createReadStream } from "fs";
	import * as assert from "assert";

	export class TemplateResult {
	constructor(
	public readonly strings: TemplateStringsArray,
	public readonly values: unknown[]

	/**
	* Convert an iterable to an object.
	*/
	export function toObject<
	TKey extends string \| number \| symbol,
	TValue
	>(iterable: {
	[Symbol.iterator](): IterableIterator<[TKey, TValue]>;
	}): Record<TKey, TValue> {
	const obj = Object.create(null) as Record<TKey, TValue>;